What does each box-shadow value mean?

box-shadow: offset-x offset-y blur-radius spread-radius color [inset]. Positive X shifts right, positive Y shifts down. Blur softens the edge. Spread grows the shadow before blur. Inset puts the shadow inside the element.

Can I stack multiple shadows?

Yes — CSS box-shadow accepts a comma-separated list. The first shadow renders on top. Material Design elevations use 2-3 stacked shadows to simulate realistic depth.

What makes a good soft shadow?

Keep alpha low (0.08–0.20), use zero or tiny spread, and large blur. Hard shadows with high alpha look dated. Offset Y slightly more than X to mimic sunlight from above.

Inset shadows render inside the element, creating a recessed/pressed look. Useful for inputs, toggles, and neumorphic surfaces.

CSS Box Shadow Generator

Developer Tools· 30 tools

Free CSS box-shadow generator with live preview. Customize horizontal and vertical offset, blur radius, spread radius, shadow color (with alpha), and toggle inset. Preset library included: subtle, card, material, elevation, neumorphism. Output: clean, copy-paste CSS.

Presets

Shadow 1

inset

Offset X0px

Offset Y10px

Blur30px

Spread-5px

Color

Alpha0.15

Page bg

Box color

Radius (16px)

CSS

box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.15);

Frequently Asked Questions

References

CSS box-shadow — MDN Web Docs — Mozilla Developer Network

Related Tools

CSS Gradient Generator
Create beautiful linear and radial CSS gradients with a live preview and copy-ready code.
Color Converter
Convert colors between HEX, RGB, and HSL formats with a live preview swatch. Essential for web designers and developers — copy any format with one click.
WCAG Color Contrast Checker
Check color contrast against WCAG 2.1 AA and AAA standards. Verify accessibility for text and UI.

Frequently Asked Questions

References and sources

Related Tools