CSS Box-Shadow Generator

What is a CSS box-shadow generator?

A CSS box-shadow generator turns sliders and a colour picker into the exact box-shadow value you need to drop a realistic shadow behind any element. Instead of memorising the order of the four length values, or guessing how much blur reads as "soft" versus "hard", you drag, watch a live preview, and copy a line that is ready to paste into a stylesheet.

The tool above does one thing the simplest generators skip: it lets you stack multiple shadow layers into a single rule. Real elevation in modern interfaces is almost never one shadow. It is a tight, slightly darker shadow close to the element plus a wider, softer shadow that fades into the background. The generator gives each layer its own offset, blur, spread, colour, opacity and inset toggle, then joins them into one comma-separated box-shadow: declaration.

A large live preview sits on an adjustable background colour so you can judge the shadow against light or dark surfaces, exactly where it will live in your design. When it looks right, one click copies the full rule.

How to use it

1. Look at the preview. A white card floats on a background you control. Change the preview background with the colour swatch so you are judging the shadow against the surface you will actually use.
2. Pick the active layer. The default starts with two layers for natural depth. Click a layer tab to edit it, or use Add layer to stack another.
3. Tune the offsets. Offset X moves the shadow left or right; Offset Y moves it up or down. A small positive Y with a soft blur reads as a light source from above, which is what most interfaces assume.
4. Set blur and spread. Blur softens the edge; more blur means a more diffuse, distant shadow. Spread grows or shrinks the shadow before blurring — negative spread is the trick for tight, contained shadows.
5. Choose colour and opacity. Shadows almost always look better as a translucent dark colour than as solid black. Lower the opacity until the shadow feels like shade, not paint.
6. Toggle inset on any layer to draw it inside the box for a pressed or recessed look.
7. Copy the CSS and paste it onto your element.

Everything runs on your own device, so the preview stays instant no matter how many layers you stack, and it keeps working offline once the page has loaded.

The anatomy of a box-shadow

Read a box-shadow value left to right and it is always the same shape:

box-shadow: 0 10px 25px -5px rgba(14, 23, 38, 0.18);

• Offset X (0) — horizontal distance. Positive pushes the shadow right, negative pushes it left.
• Offset Y (10px) — vertical distance. Positive pushes the shadow down, which is what reads as "light from above".
• Blur radius (25px) — how soft the edge is. Zero is a hard-edged shape; larger values fade out gently.
• Spread radius (-5px) — grows (positive) or shrinks (negative) the shadow before the blur is applied.
• Colour (rgba(14, 23, 38, 0.18)) — the shadow colour, almost always semi-transparent so it tints rather than blocks.

Add the optional inset keyword in front and the same value draws inside the element instead of outside.

Layering shadows for depth and elevation

The single biggest jump in quality comes from using more than one shadow. A flat card with one big blurry shadow looks like a sticker; a card with two or three tuned layers looks like it is physically lifted off the page.

A reliable recipe:

• A close, tighter layer — small Y offset, modest blur, slightly negative spread, low opacity. This is the contact shadow right under the element.
• A far, softer layer — larger Y offset, generous blur, more negative spread, even lower opacity. This is the ambient shadow that fades into the surroundings.

The higher you want an element to appear — a hover state, a modal, a dropdown — the larger and softer the far layer becomes. Because the browser paints layers in order, the last shadow in the list sits on top, so keep your tightest, darkest layer last if it should win at the edges.

Inset shadows

Switching a layer to inset flips the whole effect inward. Instead of the element casting a shadow onto the page, the page appears to cast a shadow into the element. This is how you make:

• Input fields look slightly recessed, inviting text.
• Pressed buttons that depress on :active.
• Carved panels, wells and toggles in skeuomorphic and neumorphic styles.
• Subtle inner glows when paired with a light colour.

You can mix inset and outer layers in the same rule — for example an outer elevation plus a faint inset highlight along the top edge for a glassy lip, a frosted look you can take further with our Glassmorphism Generator.

A note on performance

box-shadow is cheap to define but not free to paint, especially with large blur radii on many elements or shadows that animate. A few guidelines keep things smooth:

• Avoid animating box-shadow directly on dozens of elements; if you need a hover lift, animating transform and cross-fading to a pre-defined heavier shadow is gentler on the compositor.
• Very large blur values across a long list (cards in a grid, table rows) can cause repaint cost on scroll. Keep production shadows as small as the look allows.
• Prefer translucent colours over stacking many opaque layers — fewer, well-tuned layers paint faster and look better.

Accessible contrast

Shadows are decoration, so never rely on them alone to communicate state or boundaries. If a shadow is the only thing separating a card from its background, users with low-contrast displays or reduced-transparency settings may miss it. Pair elevation with a real border or a clear background-colour difference where the distinction matters. And keep shadow colours subtle: a heavy, high-opacity shadow behind text can reduce the effective contrast of nearby content.

Private, instant and always free

Because this box-shadow generator runs entirely in your browser, there are no accounts, no limits and nothing leaves your device. Keep it open while you design — drag, stack, preview, copy, paste — and turn a vague idea for "a nice soft shadow" into clean, production-ready CSS in seconds, with your work staying yours and no ads getting in the way of the controls. Pair it with our CSS Gradient Generator to design the surface your shadowed cards sit on.