CSS Box Shadow Generator

About Box Shadow Generator

A box-shadow generator lets you design a CSS shadow visually and copy the code. Drag the sliders for horizontal and vertical offset, blur, and spread, pick a color and opacity, and toggle inset — the preview updates live and the box-shadow rule is ready to copy. Everything runs in your browser.

Frequently asked questions

What do the box-shadow values mean?

In order: horizontal offset, vertical offset, blur radius, spread radius, then color. Positive offsets move the shadow right and down; blur softens it and spread grows or shrinks it.

What is an inset shadow?

Inset draws the shadow inside the element instead of outside, which makes it look pressed in or recessed. Toggle it to switch between outer and inner shadows.

How do I set the shadow color and opacity?

Pick a color, then use the opacity slider to control how strong the shadow is. The tool outputs the color as an rgba() value so the transparency is baked into the box-shadow rule.

Can I stack multiple shadows?

This tool builds one shadow. In CSS you can layer several by separating them with commas in a single box-shadow property.

How do I use the result?

Copy the generated rule and paste it into your CSS, or the style attribute of an element. It works in every modern browser.