Super Boring Tools

Search tools

Find a tool by name or what it does.

CSS Box Shadow Generator

Dial in a CSS box-shadow with live preview and copy the exact code.

Preview
Adjust
#0a0a0a
CSS
box-shadow: 0px 12px 24px -4px rgba(10, 10, 10, 0.2);

How to make a CSS box shadow

  1. Set the offsets and blur

    Drag the sliders for horizontal offset, vertical offset, blur, and spread. The preview card redraws with every movement.

  2. Pick the color and opacity

    Choose a shadow color with the picker and set its strength with the opacity slider. The two combine into a single rgba() value in the output.

  3. Toggle inset if you need it

    Switch the shadow from behind the element to inside it for a pressed or carved-in look.

  4. Copy the CSS

    The full box-shadow declaration sits below the controls and updates live. Click Copy CSS to grab it.

Why use this tool

Live preview while you drag

Every slider change restyles the preview card immediately, so you judge the shadow by eye instead of by numbers.

All five shadow parameters

Horizontal and vertical offsets from -50 to 50 pixels, blur up to 100 pixels, and spread from -50 to 50 pixels, each on its own slider.

Opacity baked into the color

The hex color and the opacity percentage are merged into one rgba() value, the way production shadows are usually written.

Inset shadows included

One toggle flips between an outer drop shadow and an inner inset shadow, with the CSS updated to match.

Paste-ready declaration

The output is a complete box-shadow rule ending in a semicolon, not a bare value you still have to wrap.

Nothing to install or upload

The CSS is generated locally in your browser, with no account and no server involved.

About this tool

This box shadow generator assembles a CSS box-shadow declaration from six controls: horizontal offset, vertical offset, blur, spread, opacity, and color, plus an inset toggle. Each slider movement redraws the preview card and rewrites the code in the same instant, so the CSS you copy is exactly the shadow you were looking at. The picked hex color and the opacity percentage are merged into a single rgba() value, the form most production shadows take.

Shadows are fiddly because the numbers interact. A floating card usually wants a modest vertical offset, generous blur, and a slightly negative spread; a pressed button wants an inset shadow with low blur; a hairline border effect wants almost no blur at all. Tuning those against a live preview is faster than editing a stylesheet and reloading, and the ranges here, offsets to 50 pixels either way and blur to 100, cover practically every interface shadow.

The page has no server side: CSS is generated in your browser as you drag, with nothing to sign up for. Pair it with the CSS gradient generator for the background behind a shadowed element, or the color converter when your shadow color starts out as an HSL or RGB value.

Frequently asked questions

What do the box-shadow values mean?
A box-shadow has a horizontal offset, a vertical offset, a blur radius, a spread radius, and a color. Offsets move the shadow, blur softens its edge, spread grows or shrinks it, and the color plus opacity set its tint and strength.
What is an inset shadow?
An inset shadow is drawn inside the element instead of behind it, creating a carved-in or pressed look. Toggle Inset to switch between an outer drop shadow and an inner one. The preview and CSS update immediately.
How do I use the generated CSS?
Copy the CSS and paste the box-shadow declaration into your stylesheet on the element you want to style. The output is a complete declaration, so it drops straight into any rule.
Can I make a subtle shadow?
Yes. Lower the opacity and blur for a soft, subtle shadow, or increase the vertical offset and blur for a more lifted, elevated look. The sliders let you fine-tune every value and see the result live.
Is anything uploaded to a server?
No. The preview is rendered and the CSS is generated locally in your browser. Nothing is sent anywhere, stored, or logged.

Related tools