Rectangle Component gradient Shadow

Can I make the rectangle component like this?


I think most of the answer you will get here.

I don't know how to make CSS work in Vision?

I imagine. What specifically are you looking for? The diagonal stripes or the gradient border?
Edit: I read the question from my phone [because I was pinged] and somehow overlooked the title.

the gradient border. I want my rectangle to have somewhat like a shadow

I overlooked a Vision tag, my bad :melting_face:


I'm afraid I'm away from the house today, so I don't have an ignition test environment to experiment from. I know that there are linear and radial gradient options in the color picker that could probably achieve this look if you layered and grouped components.

Another option would be too use an image component.

Does it need to be transparent?

I'm going to say basically the answer is no. Swing doesn't readily support components with non-rectangular sizes with semitransparent backgrounds. With sufficient hacking you could probably get something approximately correct with the paintable canvas, but none of the gradient options on the builtin components will give you the blended edge drop shadow effect.


I believe that it's possible to achieve this effect with the built in gradient options. It just requires grouping multiple components at different angles. I finally found a few minutes at the house to play around with this, and here is a template that should be pretty close: (3.6 KB)