Box Shadow Generator

What is a Box Shadow Generator?

A Box Shadow Generator builds the CSS for a shadow under an element using simple sliders. You control the horizontal and vertical offset, blur radius, spread, opacity and color, and a preview box updates live with the exact style you are designing.

What do the values mean?

• Offset X/Y: how far the shadow shifts right and down (negative values move it left and up).
• Blur: how soft or sharp the shadow's edge is.
• Spread: how much the shadow grows beyond the box size.
• Opacity and color: the shadow's transparency and tint.

Is my data safe?

Yes. The CSS is generated in your browser; your settings are never sent or saved. Copy the result and paste it straight into your stylesheet.

Anatomy of a box shadow

• offset-x and offset-y shift the shadow horizontally and vertically.
• blur-radius softens the edge — zero gives a hard shadow.
• spread-radius inflates or shrinks the shadow size.
• color tints it, and inset draws the shadow inside the box.

Layered shadows create depth

A single shadow reads flat; two or three stacked ones with different blur and offset mimic real light. Keep the first layer crisp and near, the second softer and wider — the classic combination for cards and floating buttons.