CSS Box Shadow Generator

Build a shadow by dragging sliders and watch it on a sample box. You control horizontal and vertical offset, blur, spread, colour, opacity and whether it's inset, and the CSS updates as you go. When it looks right, copy the line into your stylesheet.

How to use it

1. Adjust offset, blur and spread.
2. Choose a colour and opacity.
3. Tick inset for an inner shadow.
4. Copy the box-shadow line.

When it helps

• Adding depth to cards and buttons.
• Making a soft, modern shadow.
• Creating pressed or inner shadows.
• Trying ideas before touching a stylesheet.

Good to know

• Soft shadows use a big blur and low opacity; a few percent of black is often enough.
• A negative spread keeps the shadow tighter than the box.
• Subtle shadows usually look more professional than heavy ones.

What each value does

A shadow has horizontal and vertical offsets, a blur radius, a spread radius and a colour. Positive offsets move it right and down. Blur softens the edge, and spread grows or shrinks the shadow before blur. The inset keyword draws it inside the element.

Using an rgba colour with low opacity makes shadows look natural, because real shadows are never fully black.

Worked example: a soft card

For a modern card, try 0 offset horizontally, 12 vertically, blur 30, spread minus 6 and 25 percent black. It gives a diffuse shadow below the card. For a button pressed in, use an inset shadow with small offsets and low blur.

Layering two shadows, one tight and dark, one wide and soft, gives more realistic depth.

Performance and accessibility

Large blurs on many elements can slow rendering, particularly when animated. Animate opacity or transform instead, or fade between two layers.

Don't rely on shadows alone to show interactive elements, because they can be invisible in high-contrast modes. Add borders or outlines as well.

Elevation and depth

Material-style design uses shadows to show how high an element floats: small, tight shadows for low elevations, larger and softer ones for higher layers like dialogs. A consistent scale of three or four shadows is enough for most interfaces.

In dark mode, shadows are less visible, so use lighter surfaces or subtle borders to show elevation.

Copying the CSS

The generated line goes straight into your stylesheet: box-shadow: 0px 12px 30px -6px rgba(0, 0, 0, 0.25). Add a transition on box-shadow to animate hover effects, but keep them subtle.

Prefer a CSS variable for shadows you reuse, so one change updates the whole design.

Inset shadows

An inset shadow draws inside the box edges, which suits pressed buttons and input fields. Combine one inset and one outer shadow for a raised, bevelled look.

Questions