What CSS property does this tool create?

It builds a single box-shadow rule, for example box-shadow: 4px 4px 12px 0 rgba(0,0,0,0.2). You copy that line and paste it into your stylesheet or inline style.

What does the inset toggle do?

Inset draws the shadow inside the element instead of behind it, which gives a pressed or inner-glow look. Leave it off for a normal drop shadow that falls outside the box.

Why use spread and opacity?

Spread grows or shrinks the shadow before the blur is applied, so a positive value makes it larger and a negative value tucks it in. Opacity sets how strong the shadow color looks, letting you go from a faint hint to a heavy shadow.

CSS Box Shadow Generator

Offset X: 0px

Offset Y: 12px

Blur: 24px

Spread: 0px

Shadow color

Opacity: 25%

Inset

CSS

.element {
  box-shadow: 0px 12px 24px 0px rgba(26, 26, 46, 0.25);
}

What the Box Shadow Generator does

This tool helps you build a CSS box-shadow without memorizing the value order or guessing numbers. You move a few sliders, pick a color, and a live preview box shows exactly how the shadow looks while the matching CSS updates next to it. When it looks right, you copy the rule and drop it into your stylesheet. It is useful for front-end developers, designers, students learning CSS, and anyone who wants a clean card, button, or panel shadow without trial and error in the browser dev tools.

How to use it

Drag the horizontal offset slider to move the shadow left or right.
Drag the vertical offset slider to move the shadow up or down.
Set the blur slider for how soft or sharp the edge looks.
Set the spread slider to grow or shrink the shadow size.
Adjust the opacity slider to control how strong the shadow appears.
Pick the shadow color with the color picker.
Toggle inset on if you want the shadow inside the element instead of behind it.
Watch the preview and CSS update live, then copy the generated box-shadow rule.

A quick example

For a soft, modern drop shadow, keep the horizontal offset near zero, set a small positive vertical offset, raise the blur a good amount, leave spread at zero, and lower the opacity so the shadow stays subtle. That gives the gentle lifted-card effect you see on most dashboards. From there you can nudge a single slider to fine-tune it instead of rewriting the whole value by hand.

It all runs in your browser, so nothing is uploaded. The tool is private, free, and needs no sign-up.

Frequently asked questions

What CSS property does this tool create?: It builds a single box-shadow rule, for example box-shadow: 4px 4px 12px 0 rgba(0,0,0,0.2). You copy that line and paste it into your stylesheet or inline style.
What does the inset toggle do?: Inset draws the shadow inside the element instead of behind it, which gives a pressed or inner-glow look. Leave it off for a normal drop shadow that falls outside the box.
Why use spread and opacity?: Spread grows or shrinks the shadow before the blur is applied, so a positive value makes it larger and a negative value tucks it in. Opacity sets how strong the shadow color looks, letting you go from a faint hint to a heavy shadow.

Related developer tools

JSON Formatter Hash Generator Regex Tester HTML Encode / Decode Markdown Preview JWT Decoder Color Converter SQL Formatter

Last updated: June 17, 2026