CSS Box Shadow Generator

About the CSS Box Shadow Generator

Shadows help users understand depth and hierarchy: raised cards, floating buttons and modal dialogs all rely on them. The CSS Box Shadow Generator lets you design the perfect shadow by dragging sliders and watching a live preview, instead of repeatedly editing values in your code.

Control the horizontal and vertical offset, blur radius, spread, color and opacity, or switch to an inset shadow for pressed or neumorphic effects. Preview it on any box and background color, and start from presets like Soft, Floating, Retro or Glow. The output is a single clean box-shadow line.

Shadow recipes for common interface elements

/* Card resting on the page */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);

/* Raised card on hover */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

/* Focus ring for buttons and inputs */
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);

/* Pressed button */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);

The values are horizontal offset, vertical offset, blur, spread and colour. A spread of 0 with no blur, like the focus ring, draws a solid outline that follows rounded corners.

Tips for natural-looking shadows

• Use low opacity. Real shadows are soft. Values between 0.05 and 0.2 usually look best.
• Light comes from above, so give shadows a positive vertical offset and little or no horizontal offset.
• Bigger elevation, bigger blur: dropdowns and dialogs need larger, softer shadows than cards.
• Animate gently: adding transition: box-shadow 0.2s makes hover effects feel smooth.

How to use the CSS Box Shadow Generator

1. Adjust offset, blur, spread and opacity sliders.
2. Pick the shadow, box and background colors.
3. Toggle inset or try a preset.
4. Copy the generated box-shadow CSS.

Frequently asked questions