CSS box-shadow generator
Choose a shadow layer and change its offset, blur and spread — the preview updates instantly and ready-made CSS for box-shadow appears below.
.box {
border-radius: 16px;
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
}How to use it
- Start from a preset (soft, hard, layered, inner, glow) or build a shadow from scratch.
- Pick a layer and adjust the
xandyoffsets, the blur radius (blur) and the spread (spread). Tickinsetfor an inner shadow. - Choose a color and opacity — in the code they are written as
rgba(). “+ Add layer” gives you up to 5 layers. - Change the box color,
border-radiusand the page background to test the effect in realistic conditions, then click “Copy”.
How it works
box-shadow syntax
Each shadow has five parts: horizontal offset, vertical offset, blur radius (blur), spread radius (spread) and color. Adding inset at the start draws the shadow inside the element. Blur cannot be negative and 0 gives a hard edge; spread can be negative and shrinks the shadow. A shadow does not affect layout and takes up no space.
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);Multiple shadows and layer order
Shadows are separated by commas. The first one in the list is painted on top and the rest sit beneath it. For a soft, natural look designers usually stack several small shadows instead of one big one: offset and blur roughly double with every layer.
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.1),
0 4px 8px rgba(0, 0, 0, 0.1),
0 16px 32px rgba(0, 0, 0, 0.1);inset, spread and the ring effect
inset paints the shadow inside the element — above the background but below the content — which suits pressed buttons and input fields. With a blur of 0 and a positive spread, the shadow becomes a solid ring: 0 0 0 3px looks like a colored border and does not shift the layout.
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 3px #2563eb;box-shadow, drop-shadow and text-shadow
box-shadow always follows the rectangular box of the element and its border-radius. To trace the outline of a transparent PNG or an SVG, use filter: drop-shadow() — it has no spread and no inset. For text there is text-shadow: three lengths (x, y, blur) and a color.
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);FAQ
Why is my shadow not visible?
Common causes: a parent with overflow: hidden clips the shadow, or the shadow color matches the background or is too transparent. Also, an outer shadow is not painted inside the element's own box, so on an element with a transparent background it shows only around the edges.
How do I add a shadow to one side only?
Combine a negative spread with an offset: box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.5) produces a shadow on the bottom edge only. The negative spread pulls the shadow in on every side and the offset pushes it out on the side you want.
Can box-shadow be animated?
Yes, transition: box-shadow 0.2s works. But a shadow with a large blur is repainted on every frame. A lighter approach is to put the shadow on an ::after pseudo-element and animate only its opacity.
Is box-shadow enough for a focus indicator?
No. In Windows High Contrast mode (forced-colors) the browser removes shadows. Draw the focus ring with outline and keep the shadow as extra decoration.
