English
Design multi-layer CSS box-shadow with a live preview and copy production-ready CSS.
Last updated
box-shadow:
0px 8px 24px 0px rgba(0, 0, 0, 0.18);box-shadow is the CSS property that adds drop shadows, glows, and inset wells to any element. It is the single biggest lever for giving a flat design a sense of *elevation* - cards lift off the page, modals float above content, buttons feel pressable.
The trick is that a *good* shadow is rarely one layer. Real-world shadows are softer and have ambient bounce - most design systems (Material, iOS, Tailwind) stack 2–3 box-shadow declarations with different offsets and opacities. Hand-writing those is fiddly; a generator lets you tune each layer visually and see the combined result live.
Coddy's generator supports unlimited layers, both *outer* and *inset* shadows, color and opacity per layer, and presets covering the most common patterns: subtle cards, sharp drops, brand glows, inset wells, and neumorphic surfaces. Copy the CSS and paste it straight into your stylesheet - no upload, no account, no watermark.
box-shadow: [inset] <x> <y> <blur> <spread> <color>. inset puts the shadow *inside* the element; without it the shadow falls outside.Pick a preset that matches the feeling you want - subtle card, soft elevation, sharp drop, brand glow, inset well, or neumorphic. The presets are good starting points you can tune.
Drag the sliders for X/Y offset, blur, spread, color, and opacity. The preview on the left updates live. Lower opacity and higher blur read as *softer* shadows.
Click *Add layer* to stack a second shadow. Real-world depth almost always uses two layers: one short and tight (the contact shadow) and one long and soft (the ambient shadow).
Turning on *Inset* paints the shadow inside the element instead of around it. Combine with a subtle outer shadow for a pressed-button effect.
When the preview matches your design, click *Copy CSS*. Paste the result into your stylesheet - the generated rule includes every active layer.
Each value in box-shadow: x y blur spread color and the role it plays.
| Value | Effect | Typical range |
|---|---|---|
| X offset | Pushes shadow horizontally; positive = right | −40px to 40px |
| Y offset | Pushes shadow vertically; positive = down | 0px to 40px for natural light |
| Blur | Softens the edge of the shadow | 0px to 80px |
| Spread | Grows or shrinks before blur is applied | −30px to 30px |
| Color | Any CSS color, but rgba() lets you tune opacity per layer | rgba(0,0,0,0.05–0.3) for natural shadows |
inset | Paints the shadow inside the element | - |
| Multiple layers | Comma-separated; stack from back to front | 2–3 layers gives realistic depth |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);A tight low-blur shadow defines the contact point, and a longer softer shadow gives the impression of ambient light. This is the pattern most modern design systems use.
box-shadow: 0 0 24px 4px rgba(108, 140, 255, 0.45);Set X and Y to zero so the glow radiates evenly. A small positive spread thickens the glow before the blur softens it. Use sparingly - colored glows draw a lot of attention.
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06);Inset shadows paint inside the element. One soft shadow gives the impression of a recessed well; a hairline inset adds a subtle inner border for definition.
box-shadow value mean?box-shadow: x y blur spread color. The first two are offsets; *blur* softens the edge; *spread* changes the size before blur; the color is any CSS color (use rgba() for opacity control). Add inset at the start to put the shadow inside the element.box-shadow and filter: drop-shadow()?box-shadow follows the element's bounding rectangle and is fast to paint. drop-shadow() follows the alpha channel of whatever it is applied to (great for SVGs and transparent PNGs) but costs more to render. Use box-shadow for cards and buttons; use drop-shadow() for irregular shapes.transform: scale() somewhere up the tree.box-shadow affect layout?overflow: visible.