CSS Box Shadow Generator
Build CSS box shadows visually with live preview. Adjust offset, blur, spread, colour, and opacity. Stack multiple layers and copy the CSS.
Quick Presets
Shadow Layers (1)
Shadow 1
CSS Output
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
The Five Numbers Behind Every Box Shadow
A CSS box-shadow declaration has a strict order: inset (optional), offset-x, offset-y, blur-radius, spread-radius, then colour. The tool exposes each of these as its own slider so you can move them independently and watch the preview update on every change. The default starts at offset-x: 0, offset-y: 4px, blur: 6px, spread: 0, with black at 10% alpha, which matches the soft Material-style elevation most apps reach for first.
Offset-x and offset-y push the shadow horizontally and vertically; positive Y values drop the shadow below the box, mimicking light from above. Blur softens the edge, while spread expands or contracts the shadow before the blur kicks in. A negative spread on a positive offset is the trick behind subtle inset card shadows that look pressed-in rather than floating.
Stacking Layers for Realistic Depth
A single shadow rarely looks convincing. Real objects cast a tight, dark shadow close to the surface and a wider, softer shadow further out. The Layered preset combines two shadows separated by a comma, the first at 0 2px 4px / 5% alpha and the second at 0 8px 16px / 10% alpha, which is roughly the recipe behind Stripe's and Linear's card shadows.
Click 'Add Layer' to build your own stack. Each layer renders in source order, with the first listed shadow drawn on top. For glow effects, pick the Glow preset and switch the colour from black to your accent. Inset shadows are useful for input fields, pressed-button states, and faux engraving on labels. Combining one inset and one outer shadow on the same element is a common pattern for skeuomorphic toggles.
Common Shadow Recipes
| Effect | Shadow Values | Best For |
|---|---|---|
| Subtle card | 0 1px 3px rgba(0,0,0,0.05) | List items, table rows |
| Default elevation | 0 4px 6px rgba(0,0,0,0.1) | Buttons, dropdown menus |
| Heavy lift | 0 10px 25px rgba(0,0,0,0.2) | Modal dialogs, popovers |
| Sharp / brutalist | 2px 2px 0 rgba(0,0,0,0.3) | Neobrutalist UI, retro buttons |
| Coloured glow | 0 0 20px rgba(59,130,246,0.6) | Focus states, hero CTAs |
Frequently Asked Questions
What is the difference between blur and spread?
Blur softens the shadow's edge over the radius you specify, fading from solid colour to transparent. Spread changes the shadow's size before blur is applied; a positive spread makes the shadow visibly larger than the box, a negative spread shrinks it. Set blur to 0 and spread to 4px to get a hard, evenly enlarged outline. Set spread to 0 and blur to 20px for a soft halo.
How do inset shadows work?
Add the keyword 'inset' before the offset values and the shadow renders inside the element instead of outside, exactly as if light were hitting from the opposite direction. Inset shadows are typical on form inputs and pressed states. You can mix inset and outer shadows on the same element by separating them with a comma.
Why does my shadow get clipped at the parent's edge?
An ancestor element with overflow: hidden, overflow: clip, or border-radius without enough padding will clip shadows that extend past its bounds. The fix is usually to add padding to the parent equal to or greater than your shadow's blur plus spread, or to remove the overflow constraint where possible.
Can I animate box-shadow?
Yes, but it triggers a paint on every frame and can stutter on lower-end devices. For smoother lift-on-hover effects, animate transform: translateY combined with a static shadow that already includes the lifted state, or use a pseudo-element with opacity to fade the shadow in. This keeps animations on the GPU-accelerated compositor layer.
Related Tools
CSS Gradient Generator
Create beautiful CSS gradients with a visual builder. Choose colours, positions, angles, and gradient type. Copy the CSS with vendor prefixes.
Pixel to REM Converter
Convert pixels to REM units and back. Set your base font size, see a reference table of common values, and copy CSS with one click.
Colour Contrast Checker
Check if your text and background colours meet WCAG accessibility standards (AA & AAA). Auto-fix suggestions included