Inner & Outer Shadows

Ask the community
, ,
1

How do you add an inner and outer shadow to an element in wix??

I’m using Wix Studio - I’ve enabled Velo once I discovered Wix doesn’t inherently support multiple shadow effects on a single element.

This is the code I’ve tried to implement on a container:

.shadowBox {
background-color: #ffffff;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Outer shadow /
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3); / Inner shadow */
}

This works in the global css file, but only if one or the other is used.
ie: if the inset is used, inner shadow shows. If both css styles are applied, only the inset shows - drop doesn’t show unless it stands alone.

I’m so confused. Anyone find a reason why and how to apply multiple shadow styles to one element? This seems very basic and is allowed in every other editor I’ve used (elementor, divi, webflow).

1 Like
2

Hi, @info87596 !!

Wouldn’t it work if you combined them like this? :innocent:

.shadowBox {
  background-color: #ffffff;
  box-shadow:
    10px 10px 20px rgba(0, 0, 0, 0.5),
    inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}
3 Likes
3

THANK YOU. As you can tell I don’t utilize custom code often - I appreciate you quick response!

1 Like