How to use the CSS Box Shadow Generator
1. Adjust the X offset (horizontal position), Y offset (vertical position), blur radius, and spread radius using the sliders.
2. Choose the shadow color and optionally enable Inset for an inner shadow effect.
3. Copy the generated box-shadow CSS property and apply it to your element.
What is it?
The CSS box-shadow property adds shadow effects to elements, creating depth and visual hierarchy. The four key parameters control the shadow geometry: X offset (positive = right, negative = left), Y offset (positive = down, negative = up), blur radius (higher = softer edge), and spread radius (positive = larger shadow, negative = smaller). The color includes an alpha value for transparency — semi-transparent shadows look more realistic than solid ones.
Box shadows are a fundamental tool in modern UI design — used for cards, modals, dropdowns, buttons, and floating elements. The inset option creates inner shadows, useful for pressed button states, inset form fields, and recessed container effects. Multiple box-shadows can be comma-separated in CSS for layered effects.
Example
Offset: 0 4px · Blur: 16px · Spread: 0 · Color: rgba(0,0,0,0.15)
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
This is a standard 'elevation-2' shadow used in Material Design and most UI frameworks.
Benefits
Design shadows visually without memorising box-shadow syntax
Adjust blur, spread, X/Y offset, and color with sliders — see the shadow update live and copy the CSS when it looks right.
Layer multiple shadows for realistic depth and elevation
Add and combine multiple inset and outset shadows to create material design elevation, neumorphic, or glassmorphism effects.
Match the exact shadow from a design specification
Tweak values until your implementation matches the Figma or Sketch shadow spec pixel-perfectly, then copy the CSS output.
Production-ready CSS in one click — no manual calculation
The generated output is valid, browser-compatible box-shadow CSS — paste directly into your stylesheet.
Frequently asked questions
What is the difference between blur radius and spread radius?
Blur radius controls the softness of the shadow edge — 0 is a sharp shadow, higher values create a softer, more diffused shadow. Spread radius expands or contracts the shadow size before blurring — positive values make the shadow larger than the element, negative values make it smaller.
How do I make a realistic drop shadow?
Realistic shadows typically have a small Y offset (4-8px), moderate blur (8-24px), zero spread, and a semi-transparent dark color (rgba(0,0,0,0.15-0.25)). The shadow should be darker and more opaque for closer (lower elevation) objects.
What does the Inset option do?
Inset shadows appear inside the element boundary rather than outside. They're used for pressed/sunken button states, inset form fields, and container depth effects. The offset and blur parameters work the same way, but the shadow is rendered inward.