Tools / CSS

Box-shadow builder

Stack several shadow layers to get the soft, realistic depth a single shadow can't give you. Start from a preset, tweak each layer and copy the CSS.

Presets

Layers

Live preview

Card title Your shadow, previewed on a Divi-style card.
22px
#ffffff

Your CSS

box-shadow declaration
box-shadow: none;

How to use it in Divi

Divi's Design → Box Shadow setting only holds one shadow. For layered shadows, open the module's Advanced → Custom CSS → Main Element box and paste the full declaration. If it doesn't show, add !important before the semicolon.

Shadows on carousel slides? Divi Carousel lets you style each slide card, so a layered shadow makes the whole slider feel lifted off the page.

See Divi Carousel

Why layer box shadows?

Real shadows have a sharp, dark part close to the object and a soft, faint part further away. One box-shadow can only do one of those. Stacking two to four layers with growing blur and offset, each at low opacity, gives a far more natural result.

What each value means

box-shadow: X Y blur spread colour. X and Y move the shadow, blur softens it, and spread grows or shrinks it before blurring. Add inset to draw the shadow inside the element.