How to make a rounded border with a gradient?

Get Help
1

Hello!

In the lightning examples, there is an example for a border, but not a rounded one, nor one with a gradient. I try to set the border with a radius, but it stays squared. I also have tried to set different colors (i.e. colorLeft: 0xffff0000, colorRight: 0xff00ff00), but there is no gradient, it just defaults to white. Is it possible to have a rounded border with a gradient using the border shader? If so, how?

Or, will I have to create 2 rectangles, one larger than the other and behind the main one, then add a hole punch (the main button background is slightly transparent, so I would need the rectangle behind the main background that would act as a border to have a hole so that the main background remains see thru). How would I do this? I ask because the hole punch for me is just a white box between the two rectangles.

Also, is there a way to stack multiple shaders on one element?

i.e.
RoundedRectangleWithOutline: {
rect: true,
shader: {
type: [Lightning.shaders.RoundedRectangle, Lightning.shaders.Outline],
…
}
…
}

1 Like
2

Try this for the ring (replace some of the variables with that you want):

Ring: {
        mount: 0.5,
        x: this.w / 2,
        y: this.h / 2,
        texture: lng.Tools.getRoundRect(
          this.w,
          this.h,
          radius: 16,
          16,
          false,
          false,
          false
        ),
        colorUl: primary,
        colorBl: transition,
        colorUr: transition,
        colorBr: secondary
      }

RoundedRectangle Shader will work on a texture that already exists, such as an image that you want to round. Then you’ll need to layer on a Ring like above with it.

Chris

3

how did you fixed this ? @myusername