Box Shadow Generator
Visual CSS box-shadow generator with live preview. Control offset, blur, spread, color, and opacity with sliders. Add multiple shadow layers and copy the CSS instantly.
Shadow Layers
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);How to use
- 1 Adjust the X offset, Y offset, blur radius, and spread for the first shadow layer.
- 2 Pick a shadow color using the color picker.
- 3 Toggle Inset to create an inner shadow.
- 4 Click "+ Add Layer" to stack multiple shadows for complex effects.
- 5 Copy the CSS box-shadow value when you're happy with the preview.
Key features
- Layer multiple box shadows on a single element
- Control X/Y offset, blur, spread, and color per layer
- Inset shadow support for pressed/sunken effects
- Live preview on a sample card — see the exact result before copying
CSS box-shadow
The box-shadow property draws one or more shadows behind an element's border box. Each shadow is defined by up to five values: horizontal offset, vertical offset, blur radius, spread radius, and color. An optional inset keyword moves the shadow inside the element.
Unlike filter: drop-shadow(), box-shadow always follows the rectangular border box — it does not follow the shape of transparent cutouts. Multiple comma-separated shadows are rendered back-to-front, allowing rich layering effects.
Common Use Cases
Card elevation
A subtle outer shadow gives cards visual depth, helping them lift off the page background. Use low opacity and a large blur for a natural feel.
Inner depth / pressed state
Inset shadows simulate a recessed or pressed-in effect — great for active button states or input fields in neumorphic designs.
Glow effects
A zero-offset shadow with a large blur and a saturated color creates a glowing halo — popular for neon-style UI elements and focus rings.
Border alternative
Use a zero-blur, zero-offset shadow with spread to add a border that doesn't affect layout (unlike outline or border, it doesn't shift surrounding elements).
Layered realism
Stack two or more shadows — a sharp close shadow and a diffuse far shadow — to simulate realistic ambient + direct light. Common in Material Design.
Focus indicators
box-shadow is the standard way to add accessible focus rings in modern UI libraries, since it can be rounded and colored without affecting layout.
Shadow Value Reference
Each comma-separated layer accepts the following values in order.
| Value | Required | Effect |
|---|---|---|
| inset | No | Renders the shadow inside the element instead of outside. |
| offset-x | Yes | Horizontal offset. Positive = right, negative = left. |
| offset-y | Yes | Vertical offset. Positive = down, negative = up. |
| blur-radius | No (default 0) | Higher value = softer, more spread-out shadow. |
| spread-radius | No (default 0) | Positive = shadow grows larger than element; negative = shrinks. |
| color | No (default currentColor) | Any valid CSS color. Use rgba() or hsla() for transparency. |
Multi-layer Shadow Techniques
Use semi-transparent colors
Black (#000) at full opacity looks harsh. Use rgba(0,0,0,0.12) or an hsl value with low lightness and ~15% alpha for natural shadows.
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);Combine ambient + direct light
Stack a large blurry shadow (ambient) and a sharper small shadow (direct) for realistic depth. This is the technique behind Material Design elevation.
box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12);Animate with opacity instead of shadow
Animating box-shadow directly triggers layout recalculations. A more performant pattern is to keep the shadow at its final size and animate opacity.
Spread as a border trick
A 0 0 0 2px spread shadow acts as an inline border that doesn't affect the layout box — useful for focus rings and stacked avatars.
box-shadow: 0 0 0 2px #3b82f6;