# Rectangle Component gradient Shadow **URL:** \ **Category:** Ignition\ **Tags:** ignition81, vision\ **Created:** [May 24, 2023, 6:38am UTC](https://forum.inductiveautomation.com/t/rectangle-component-gradient-shadow/74108 "2023-05-24T06:38:11Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![Dan\_Kevin\_Dagapioso](https://avatars.discourse-cdn.com/v4/letter/d/eb9ed0/32.png) [@Dan\_Kevin\_Dagapioso](https://forum.inductiveautomation.com/u/Dan_Kevin_Dagapioso)\ **Post date:** [May 24, 2023, 6:38am UTC](https://forum.inductiveautomation.com/t/rectangle-component-gradient-shadow/74108/1 "2023-05-24T06:38:11Z")
Can I make the rectangle component like this? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/a/2a4d477d393c33605f040828c79db8fedb9cfe3e.png) ---
**Author:** ![Dan\_Kevin\_Dagapioso](https://avatars.discourse-cdn.com/v4/letter/d/eb9ed0/32.png) [@Dan\_Kevin\_Dagapioso](https://forum.inductiveautomation.com/u/Dan_Kevin_Dagapioso)\ **Post date:** [May 24, 2023, 6:49am UTC](https://forum.inductiveautomation.com/t/rectangle-component-gradient-shadow/74108/2 "2023-05-24T06:49:58Z")
@justinedwards.jle ---
**Author:** ![andrew.budaiev](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andrew.budaiev/32/72921_2.png) [@andrew.budaiev](https://forum.inductiveautomation.com/u/andrew.budaiev)\ **Post date:** [May 24, 2023, 6:54am UTC](https://forum.inductiveautomation.com/t/rectangle-component-gradient-shadow/74108/3 "2023-05-24T06:54:24Z")
I think most of the answer you will get here. > **[Different Ways to Get CSS Gradient Shadows | CSS-Tricks](https://css-tricks.com/different-ways-to-get-css-gradient-shadows/)** > > It’s a question I hear asked quite often: Is it possible to create shadows from gradients instead of solid colors? There is no specific CSS property that does ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [May 24, 2023, 7:55am UTC](https://forum.inductiveautomation.com/t/rectangle-component-gradient-shadow/74108/4 "2023-05-24T07:55:48Z")
> [@andrew.budaiev](#): > > the answer you will get here. I don't know how to make CSS work in Vision? > [@Dan\_Kevin\_Dagapioso](#): > > make the rectangle component like this 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. ---
**Author:** ![Dan\_Kevin\_Dagapioso](https://avatars.discourse-cdn.com/v4/letter/d/eb9ed0/32.png) [@Dan\_Kevin\_Dagapioso](https://forum.inductiveautomation.com/u/Dan_Kevin_Dagapioso)\ **Post date:** [May 24, 2023, 8:03am UTC](https://forum.inductiveautomation.com/t/rectangle-component-gradient-shadow/74108/5 "2023-05-24T08:03:43Z")
the gradient border. I want my rectangle to have somewhat like a shadow ---
**Author:** ![andrew.budaiev](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andrew.budaiev/32/72921_2.png) [@andrew.budaiev](https://forum.inductiveautomation.com/u/andrew.budaiev)\ **Post date:** [May 24, 2023, 8:35am UTC](https://forum.inductiveautomation.com/t/rectangle-component-gradient-shadow/74108/6 "2023-05-24T08:35:13Z")
> [@justinedwards.jle](#): > > I don't know how to make CSS work in Vision? I overlooked a Vision tag, my bad 🫠 ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [May 24, 2023, 2:08pm UTC](https://forum.inductiveautomation.com/t/rectangle-component-gradient-shadow/74108/7 "2023-05-24T14:08:30Z")
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. ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [May 24, 2023, 2:35pm UTC](https://forum.inductiveautomation.com/t/rectangle-component-gradient-shadow/74108/8 "2023-05-24T14:35:18Z")
Does it need to be transparent? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [May 24, 2023, 3:37pm UTC](https://forum.inductiveautomation.com/t/rectangle-component-gradient-shadow/74108/9 "2023-05-24T15:37:16Z")
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. ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [May 26, 2023, 9:47am UTC](https://forum.inductiveautomation.com/t/rectangle-component-gradient-shadow/74108/10 "2023-05-26T09:47:52Z")
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: [dropShadow.zip](https://forum.inductiveautomation.com/uploads/short-url/3ha6m5BSLVEwFFrnwHDpslqjcIS.zip) (3.6 KB) **Images:** ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/5/6596eb82b0726000e059b20a5b4b8590f5263c88.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/9/e950e17294e3f5491f4d72ddc2c3a5133f25d24d.png) ---
**Author:** ![Robert\_Giroux](https://avatars.discourse-cdn.com/v4/letter/r/f1d935/32.png) [@Robert\_Giroux](https://forum.inductiveautomation.com/u/Robert_Giroux)\ **Post date:** [December 3, 2024, 8:48pm UTC](https://forum.inductiveautomation.com/t/rectangle-component-gradient-shadow/74108/11 "2024-12-03T20:48:14Z")
You can import a transparent dropshadow like this, arrange it behind any component you want, and then resize. If you have photoshop or similar you can make any colored gradient boxes you like, turn the opacity down, export as png, and do the same. ![1_c1X49-nG6ItTxn_dXnIk8Q](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/0/00b1847c48433fbea3d9bbac631dcafa82acfea6.png) ---
**Author:** ![Robert\_Giroux](https://avatars.discourse-cdn.com/v4/letter/r/f1d935/32.png) [@Robert\_Giroux](https://forum.inductiveautomation.com/u/Robert_Giroux)\ **Post date:** [December 3, 2024, 9:01pm UTC](https://forum.inductiveautomation.com/t/rectangle-component-gradient-shadow/74108/12 "2024-12-03T21:01:38Z")
Example: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/7/b79ce03e66198c998613c73222bf2eff07077ebc.png) ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [December 4, 2024, 9:08am UTC](https://forum.inductiveautomation.com/t/rectangle-component-gradient-shadow/74108/13 "2024-12-04T09:08:55Z")
That looks great!