CSS Box Shadow Generator

Set offset, blur, spread, colour and opacity, stack several shadow layers, and copy the box-shadow CSS. A live card shows the result. It runs in your browser.

This box shadow generator builds a single soft shadow or a stack of layers that read as one realistic drop. Each layer has its own X and Y offset, blur, spread, colour and opacity, plus an inset switch for inner shadows. As a css shadow generator it recomputes the box-shadow value on every drag, and the preview card shows exactly what you will get. Add a second or third layer when you want depth that a single shadow cannot fake, then copy the whole declaration. It works as a quick box-shadow maker or a full drop shadow css tool depending on how far you push it.

CSS
box-shadow: 0px 14px 30px -8px rgba(15, 30, 55, 0.4), 0px 4px 10px -4px rgba(15, 30, 55, 0.25);

How it works

  1. 1

    Shape the first layer

    Drag offset X and Y to move the shadow, then set blur and spread. Pick a colour and lower the opacity for a soft, natural edge.

  2. 2

    Stack more layers

    Add a layer for extra depth — a tight dark shadow plus a wide soft one reads far more real than one flat shadow. Toggle inset for inner shadows.

  3. 3

    Copy the box-shadow

    All layers are joined into one comma-separated box-shadow value. Copy it and drop it onto your element.

Instant & 100% private — nothing is uploaded

Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.

Frequently asked questions

How do I make a soft, realistic shadow?
Keep the offset small, raise the blur, use a slightly negative spread, and drop the opacity to around 0.2–0.4. Stacking two layers with this box-shadow maker — one tight, one wide — sells the effect.
What does spread do?
Spread grows or shrinks the shadow before the blur is applied. Positive spread makes it larger than the element; negative spread pulls it in, which is handy for subtle lifts. The css shadow generator previews both.
What is an inset shadow?
Inset draws the shadow inside the element instead of behind it, useful for pressed buttons or inner wells. Flip the inset toggle on any layer and the drop shadow css tool adds the keyword for you.
Can I use more than one shadow?
Yes. CSS accepts a comma-separated list of shadows on one element, and this generator manages the list for you. Add, edit or remove layers and the copied value stays valid.
Why is opacity separate from the colour?
The tool converts your hex colour plus the opacity slider into an rgba() value, so you can dial transparency without editing hex codes by hand.

More tools

JSON Formatter & ValidatorBeautify, minify, validate JSON with a collapsible tree view.Code Formatter & MinifierPretty-print or minify JS, TS, CSS, HTML, JSON, SQL and more.YAML ⇄ JSON ⇄ TOML ConverterConvert config between YAML, JSON and TOML, both ways.JSON Schema Viewer & ValidatorRender a JSON Schema as a tree and validate data against it.Markdown Editor (Live Preview)Write Markdown with a live, side-by-side HTML preview.Mermaid Live EditorTurn Mermaid text into flowcharts and diagrams, live.

More from the Hivly network

Free sister tools on our other sites.

Color Palette GeneratorShuffle palettes with the spacebar, lock favourites, copy hex codes.Length ConverterMetres, feet, miles, inches, km and more, instantly.Word CounterCount words, characters, sentences and reading time live.