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.

How to use Box Shadow Generator

Adjust offset, blur, spread, opacity and color to see the shadow live and copy the CSS.

Use the controls above to provide your input or choose options, then review the result on the page.

Why use our Box Shadow Generator

• Builds box-shadow CSS with sliders for offset, blur, spread and opacity, and a live preview.
• Complete the task with a focused Box Shadow Generator workflow instead of switching between apps.
• Open it in your browser and get started—no account or installation required.