6XC

CSS Box Shadow Generator

Design a box-shadow visually — offsets, blur, spread, color, opacity and inset — with live preview.

807 views

The box-shadow Property

Syntax: box-shadow: x y blur spread color. The offsets move the shadow, blur softens its edge, spread grows or shrinks it, and the color usually carries alpha (e.g. rgba(0,0,0,0.15)) for realism. Add inset to draw the shadow inside the box. Soft, low-opacity shadows with a small y-offset look the most natural.

Frequently Asked Questions

What is the difference between blur and spread?

Blur softens the shadow edge without changing its size; spread expands (or with negative values shrinks) the shadow in every direction before blurring.

How do I make an elegant, modern shadow?

Keep x at 0, y small (2-8px), blur generous (10-30px) and opacity low (0.08-0.2). Layering two shadows — one tight, one wide — adds depth.

Similar Tools

CSS Gradient Generator Design linear, radial and conic CSS gradients with live preview and copy the code. Generate CSS Border Radius Generator Round each corner individually or all at once, in px or %, with live preview and copyable CSS. Generate CSS Text Shadow Generator Design a text-shadow with offsets, blur, color and opacity — live preview on sample text. Generate CSS Border Generator Design a border visually — width, style (solid, dashed, dotted, double…), color and radius — with live preview. Generate