CSS Box Shadow Generator

Dial in offset, blur, spread, color, and opacity with live sliders, preview the result on a light or dark surface, and copy clean box-shadow CSS — all in your browser.

Preview

Shadow

X offset

Y offset

Blur

Spread

Color

#0a0a0a

Opacity

CSS

box-shadow: 0px 10px 25px 0px rgba(10, 10, 10, 0.2);

How to use CSS Box Shadow Generator

1
Set the offset
Use the X and Y offset sliders to push the shadow left, right, up, or down. A positive Y value drops the shadow below the element, and a negative one lifts it above.
2
Shape the shadow
Increase Blur for a soft, diffuse edge or keep it low for a crisp shadow. Spread grows or shrinks the shadow before the blur is applied.
3
Pick a color and opacity
Click the swatch to choose a shadow color, then set the opacity. Soft, low-opacity dark shadows read as the most natural on light backgrounds.

4
Copy the CSS
Toggle Inset for an inner shadow if you need one, preview it on a light or dark surface, then copy the box-shadow line into your stylesheet.

Frequently asked questions

How do I create a CSS box shadow?

Set the horizontal and vertical offset, blur, and spread with the sliders, choose a color and opacity, and the box-shadow CSS is generated below in real time. Copy it and paste it onto any element.

What does each box-shadow value mean?

The values are the horizontal offset, the vertical offset, the blur radius, and the spread radius, followed by the color. Offsets move the shadow, blur softens its edge, and spread changes how large the shadow is before it is blurred.

What is an inset shadow?

An inset shadow is drawn inside the element instead of behind it, which makes the surface look pressed in or recessed. Toggle between Outset and Inset to switch between an outer and an inner shadow.

How do I make a soft, natural shadow?

Use a small vertical offset, a generous blur, a slightly negative spread, and a dark color at low opacity, around 10 to 25 percent. Harsh, fully opaque shadows tend to look artificial.

Is my data uploaded to a server?

No. The generator runs entirely in your browser. Nothing is uploaded, logged, or stored, so your work stays private and the tool keeps working even when you are offline.

Related tools

Keep going with these handy tools

HTML to Text Converter

JSON Formatter

Regex Tester

JWT Decoder

CSS Gradient Generator

Text to HTML Converter