How do I make a softer, more natural shadow?

Increase the blur radius and lower the opacity. A large blur with a low opacity (around 10 to 25 percent) reads as a soft, realistic shadow rather than a hard edge.

What does the inset option do?

Inset draws the shadow inside the element instead of outside, which is useful for pressed buttons, input fields and inner glow effects.

Is my data uploaded anywhere?

No. The generator runs entirely in your browser using plain JavaScript and CSS. Nothing you do is sent to a server.

CSS Box Shadow Generator — Live Preview & Copy

CSS Box Shadow Generator

Design a box-shadow with sliders for offset, blur, spread, colour and opacity — watch alive preview update as you drag, then copy the CSS, all in your browser.

Horizontal offset: 5px

Vertical offset: 5px

Blur radius: 15px

Spread radius: 0px

Shadow opacity: 30%

Shadow colour Inset shadow

🔒 100% private — runs in your browser, never uploaded.

How to use the box shadow generator

Drag the horizontal and vertical offset sliders to set the direction the shadow falls.
Raise the blur radius to soften the edge, and the spread radius to grow or shrink the shadow.
Pick a shadow colour and dial in the opacity so it blends naturally with your background.
Tick inset if you want the shadow drawn inside the element instead of outside.
Click Copy to put the full box-shadow rule on your clipboard.

Understanding the box-shadow property

The CSS box-shadow property accepts up to five values in order:box-shadow: offset-x offset-y blur-radius spread-radius color;. The first two move the shadow horizontally and vertically. Blur radius controls how fuzzy the edge is — larger means softer.Spread radius expands the shadow (positive) or contracts it (negative) before the blur is applied. The final value is the colour, and using an rgba() colour lets you set the transparency so the shadow sits believably on top of whatever is behind it. This tool writes all of that for you and keeps it in the correct order.

A common trick for a clean, modern look is a small offset, a generous blur and a low opacity — for examplebox-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);. Hard, fully-opaque shadows tend to look dated, so keep the opacity well below 100% unless you are deliberately going for a sharp, retro effect.

Is it private?

Yes — everything happens on your device. The sliders, the live preview and the generated CSS are all produced by a small piece of vanilla JavaScript that runs in your browser. There is no upload, no account and no tracking of what you build. You can even use it offline once the page has loaded.

Frequently asked questions

Can I add more than one shadow?

This tool generates a single shadow. To layer shadows in CSS, separate each one with a comma inside the same box-shadow rule — generate them one at a time here and combine the values.

Why does my shadow look cut off?

If a parent element has overflow: hidden, an outer shadow can be clipped. Remove the overflow rule or add padding so the shadow has room to render.

Does it work offline?

Yes — once the page has loaded it keeps working without a connection.