CSS Box Shadow Generator
Create CSS box shadows with a visual editor. Multiple layers, presets, and live preview.
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);Design professional CSS box shadows with our visual generator. Add multiple shadow layers, adjust offset, blur, spread, and colors. Includes presets for common shadow styles.
Box shadows do the heavy lifting for depth in modern interfaces — cards lift, dropdowns float, buttons press. But the CSS syntax crams offset-x, offset-y, blur-radius, spread-radius, color, and an optional inset keyword into a single declaration, and stacking multiple shadows multiplies that complexity. Getting a subtle, layered shadow that looks like real light rather than a 2005-era drop shadow usually takes several iterations.
This generator lets you stack multiple shadow layers, adjust each one independently, and see the result immediately against a configurable background. You can combine a tight, dark near-shadow with a soft, wider far-shadow — the recipe most design systems use for elevation — without hand-calculating the values. Inset shadows are supported for pressed states and inner highlights.
Typical uses are elevation systems (cards at different z-levels), focus rings on form controls, pressed-state feedback on buttons, and faux-3D effects on skeuomorphic UI. Designers replicating a Figma or Sketch mockup also use it to translate designer-friendly shadow values into valid CSS.
- 1
Adjust the shadow values
Drag sliders for horizontal offset, vertical offset, blur, and spread. The preview element updates live so you can dial in the exact look.
- 2
Stack multiple layers
Add additional shadow layers to build realistic elevation. A common pattern is one sharp near-shadow plus one soft far-shadow — both controllable independently.
- 3
Copy the box-shadow value
Grab the full CSS declaration, which comma-separates all layers. Paste it directly into your stylesheet or a Tailwind arbitrary value.
Card elevation systems
Define a 3-5 step elevation scale (resting, hover, dragging) using consistent shadow values across your design system.
Focus rings for inputs
Replace the default browser outline with a box-shadow ring that matches your brand color and respects border-radius.
Pressed button states
Use an inset shadow to simulate a pushed-in button on :active, giving tactile feedback without JavaScript.
Figma-to-CSS handoff
Translate multi-layer drop shadows from a design file into valid CSS without hand-copying each value.
What's the difference between blur and spread?
Blur softens the shadow's edge — higher values make it more diffuse. Spread expands or shrinks the shadow before the blur is applied. Positive spread grows the shadow outward uniformly; negative spread pulls it in, useful for tight inner shadows.
How do I make a realistic shadow?
Stack two layers: a small, darker shadow near the element (short offset, low blur) and a larger, softer one farther away (bigger offset, high blur, low alpha). Real light produces both a sharp near-contact shadow and a diffuse ambient one.
Why is my box-shadow being clipped?
A parent element likely has overflow: hidden. Shadows are drawn outside the element's box, so any ancestor that clips overflow will cut them off. Move the shadow up the tree or change the overflow rule on the parent.
Does box-shadow affect layout?
No. Shadows are rendered purely in the paint phase and don't contribute to the element's layout box. They won't push siblings or trigger reflow, which is why they're cheap to animate.
Can I animate box-shadow performantly?
Animating box-shadow directly triggers repaints on every frame, which can jank on complex pages. For better performance, animate a pseudo-element's opacity instead, or use filter: drop-shadow on a transformed element.