Box Shadow Generator
Free visual CSS box-shadow generator. Design shadows with live preview — offset, blur, spread, color and inset. Copy production-ready box-shadow CSS. All processing is local and private.
How to Use Box Shadow Generator
Adjust Shadow Properties
Use the sliders to set the shadow offset (X and Y), blur radius, spread radius, and color. Check "Inset" for inner shadows. The preview box updates in real-time.
View the Preview
The preview box shows exactly how the shadow will render. The box itself has a white background so you can see both the element and its shadow clearly.
Copy the CSS
The generated box-shadow CSS value updates as you adjust settings. Copy it and paste directly into your CSS. You can also add multiple shadows by generating and stacking values.
Frequently Asked Questions
What do the box-shadow values mean?
box-shadow: offset-x offset-y blur spread color; offset-x: horizontal position (positive = right). offset-y: vertical position (positive = down). blur: how soft the shadow edge is (0 = sharp, higher = softer). spread: how much the shadow expands or contracts (positive = larger, negative = smaller). color: any CSS color value including rgba for transparency. Adding "inset" at the start creates an inner shadow.
Can I add multiple shadows?
Yes, CSS supports multiple box-shadows on one element, separated by commas. Generate each shadow separately with this tool, copy the values, and combine them: box-shadow: 2px 2px 8px rgba(0,0,0,0.1), 0 0 0 2px #3b82f6; Multiple shadows layer from top to bottom (first shadow on top). This is commonly used for combining a subtle drop shadow with a colored focus ring.
Does box-shadow affect layout?
No. Box shadows are purely visual — they don't take up space or affect the box model. Neighboring elements won't shift to accommodate a shadow. This is different from outline and border, which do affect layout (border) or may overlap adjacent elements (outline). If you need a shadow that affects layout, use a pseudo-element with a lower z-index instead.
What about performance?
Box shadows are GPU-accelerated in modern browsers and have minimal performance impact. However, animating box-shadow (changing it on hover or during transitions) can trigger repaints. For animated shadows, prefer using opacity transitions on a pseudo-element with a fixed shadow — this is more performant than changing the shadow values directly.
Box Shadow Design Tips
Well-designed shadows create depth without being noticed. The best shadows look natural — like light falling on a physical object.
- Subtle is better: Low opacity (5-15%) with moderate blur feels natural. High opacity shadows look harsh and dated.
- Layer shadows: Use 2-3 stacked shadows for realistic depth — a tight shadow (small offset/blur) with higher opacity plus a wider shadow with lower opacity.
- Match your light source: Consistent offset direction across all shadows on a page creates a cohesive look.
- Inset for pressed effects: Inset shadows make elements look pressed or indented — great for active button states and input fields.