How to Create a CSS Box Shadow (2026)

The brevio CSS Box Shadow Generator lets you build, stack, and preview box shadows in real time, then copy the finished CSS in one click. Everything runs in your browser — no file uploads, no account required.

The box-shadow CSS Syntax

box-shadow: <h-offset> <v-offset> <blur-radius> <spread-radius> <color>;
box-shadow: inset <h-offset> <v-offset> <blur-radius> <spread-radius> <color>;

Multiple shadows are comma-separated and rendered front-to-back, so the first shadow in the list appears on top. The inset keyword moves the shadow inside the element's border.

How to Create a Box Shadow Step by Step

1. Open the CSS Box Shadow Generator.
2. Set the horizontal and vertical offsets. Equal positive values (e.g. 4px, 4px) produce a classic bottom-right drop shadow. Zero offsets centred with blur and spread create a flat glow.
3. Adjust blur radius. 0px gives a hard, sharp shadow. 6–12px produces a soft natural shadow. Very large values (20px+) create ambient glow effects.
4. Set spread radius. Leave at 0 for a standard shadow. A negative spread paired with offset and blur produces a shallow, realistic shadow that appears only beneath the element.
5. Pick a colour and opacity. Semi-transparent blacks (rgba(0,0,0,0.15)) are the safest default. For coloured cards or dark surfaces, use a colour that complements the background.
6. Add more shadows. Layer multiple shadows for depth — a tight close shadow combined with a larger diffused shadow mimics real-world lighting.
7. Copy the CSS. Click Copy CSS to get the full box-shadow: declaration ready to paste.

Common Box Shadow Patterns

Subtle card shadow

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

Material Design elevation (depth 4)

box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2),
            0 4px 5px 0 rgba(0,0,0,0.14),
            0 1px 10px 0 rgba(0,0,0,0.12);

Hard offset (retro style)

box-shadow: 4px 4px 0 #000;

Inset pressed state

box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);

Coloured glow

box-shadow: 0 0 0 4px rgba(99,102,241,0.3), 0 4px 16px rgba(99,102,241,0.2);

Frequently Asked Questions

Does box-shadow affect layout?

No. box-shadow is painted outside the box model and does not occupy space. Use a transparent outline or adjust margins if you need the shadow to influence surrounding layout.

Can box-shadow be animated?

Yes, it is animatable. However, animating blur or spread is expensive because it triggers a repaint on every frame. For smooth transitions, animate opacity on a pseudo-element that already has the shadow, or transition only the opacity of the shadow colour.

What is the difference between box-shadow and filter: drop-shadow()?

box-shadow follows the element's border-box, ignoring transparency. filter: drop-shadow() follows the rendered shape including transparent cutouts, making it useful for PNG images, SVGs, and irregular shapes. For regular rectangular elements, box-shadow is more performant and gives you the extra spread parameter.

How do I remove a box shadow?

Set box-shadow: none. This explicitly overrides any inherited or previously set shadow value.