# Tab container and box shadow **URL:** \ **Category:** Ignition\ **Created:** [July 24, 2022, 7:43pm UTC](https://forum.inductiveautomation.com/t/tab-container-and-box-shadow/62255 "2022-07-24T19:43:52Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [July 24, 2022, 7:43pm UTC](https://forum.inductiveautomation.com/t/tab-container-and-box-shadow/62255/1 "2022-07-24T19:43:52Z")
Good morning, I would like to remove the box shadow of the tab container; I see inspecting it that the default grey color should be made in this lines: ```auto .ia_tabContainerComponent__tab--modern--active { font-weight: 500; color: var(--neutral-90); box-shadow: inset 0 -3px var(--border); ``` So i create a new style and insert the code under “background image” to make a test and change the color to white but it doesn’t work: ```auto } ia.container.tab { box_shadow: #ffffff } { ``` Could you help me please? ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [July 24, 2022, 9:28pm UTC](https://forum.inductiveautomation.com/t/tab-container-and-box-shadow/62255/2 "2022-07-24T21:28:03Z")
I’m not seeing a shadow when I drop a tab container onto a view. (Ignition 8.1.16.) Can you post a cropped screengrab? ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [July 25, 2022, 5:51am UTC](https://forum.inductiveautomation.com/t/tab-container-and-box-shadow/62255/3 "2022-07-25T05:51:04Z")
Ok course, here you are the picture. I add the white rectangle adding the styles of the active tab as in picture attached. ![Annotation 2022-07-25 074625](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/6/76390891bf147c6d5e70b1ee494e47100c4a1323.png) ![Annotation 2022-07-25 074712](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/f/cfb1e58238655e95db01f3e4d9b1c742ae93b90f.png) ![Annotation 2022-07-25 075027](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/f/fff8979d83d21324c0643e9e061d4732e98fc6ae.png) ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [July 25, 2022, 8:22am UTC](https://forum.inductiveautomation.com/t/tab-container-and-box-shadow/62255/4 "2022-07-25T08:22:59Z")
You omitted to mention that you were using `menuType : modern` although I might have spotted it from the CSS. Try adding `props.tabstyle.active.box-shadow : none` ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [July 25, 2022, 11:39am UTC](https://forum.inductiveautomation.com/t/tab-container-and-box-shadow/62255/5 "2022-07-25T11:39:40Z")
> [@Aiasa21](#): > > `ia.container.tab { box_shadow: #ffffff }` the selector and the property are not copied correct from the line you posted above xd also proabbly needs !important ```auto } .ia_tabContainerComponent__tab--modern--active { box-shadow: inset 0 -3px #ffffff !important } { ``` ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [July 25, 2022, 11:53am UTC](https://forum.inductiveautomation.com/t/tab-container-and-box-shadow/62255/6 "2022-07-25T11:53:44Z")
If I was trying to get rid of the shadow using the color property I’d make it transparent - `#ffffff00`. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [July 25, 2022, 11:54am UTC](https://forum.inductiveautomation.com/t/tab-container-and-box-shadow/62255/7 "2022-07-25T11:54:36Z")
You can use `box-shadow: none !important` to make it dissapear, seems like he wanted it to be white idk. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [July 25, 2022, 12:26pm UTC](https://forum.inductiveautomation.com/t/tab-container-and-box-shadow/62255/8 "2022-07-25T12:26:17Z")
There’s a difference between transparent and `none`, which is akin to the difference between `props.meta.visible` and `props.position.display`. I.e. `none` removes the box-shadow altogether whereas transparent uses processing power to “display” an invisible colour ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [July 25, 2022, 3:56pm UTC](https://forum.inductiveautomation.com/t/tab-container-and-box-shadow/62255/9 "2022-07-25T15:56:37Z")
> [@victordcq](#): > > You can use `box-shadow: none !important` to make it dissapear, seems like he wanted it to be white idk. Thanks guys for all your help. I apologize for not to be very clear in the explanation. In the end using `} .ia_tabContainerComponent__tab--modern--active { box-shadow: none } {` it works properly.. the only things is that in the designer I don't see the exaclty preview (even in preview mode), but if i launch it with F12 or with the app it looks correct. Thank you very much for your time