HTTP Status Codes
Every HTTP status code, searchable, with what it actually means.
Box Shadow Generator
Build layered box shadows visually, with a live preview.
Layer 1
Preview
Preview
Quick Tool Overview
The Box Shadow Generator builds layered shadows with sliders and a live preview, because a convincing shadow is two or three stacked layers rather than one large blur — which is what every good design system does.
- What it does
- Builds CSS box shadows visually
- You give it
- Offsets, blur, spread and colour per layer
- You get back
- A box-shadow declaration with a live preview
- Best for
- Cards, buttons, dropdowns and elevation scales
About the Box Shadow Generator
Box shadows are four numbers and a colour, and getting them right by guesswork is slow. Drag the offsets, blur and spread and watch the preview update, then copy the declaration when it looks right.
The layering is what makes a shadow look real. A single large blur reads as a smudge; two or three stacked shadows — a tight one for contact and a wider, softer one for depth — is what every well-made design system uses. You can add layers, reorder them, and toggle any of them to inset for an inner shadow. Presets cover the elevation scales people actually copy, and the output is given as CSS, as a Tailwind arbitrary value and as a React style object.
Key features of the Box Shadow Generator
Stack several layers
A tight shadow for contact and a wide faint one for distance. That combination is what reads as depth; a single blur reads as a smudge.
Inset shadows
Toggle any layer to inset for the pressed look an input or an active button needs.
Three output formats
Plain CSS, a Tailwind arbitrary value, and a React style object.
Elevation presets
The scales that design systems actually ship, ready to adjust rather than copy blindly.
Live preview
On a real element over a real background, so the shadow is judged rather than guessed at.
How to use the Box Shadow Generator
-
1
Drag the sliders
Horizontal and vertical offset, blur radius, spread and colour.
-
2
Add layers
Stack two or three shadows — that is what makes depth look convincing.
-
3
Try inset
An inset shadow falls inside the element, for pressed buttons and inputs.
-
4
Copy the CSS
Plain CSS, a Tailwind arbitrary value or a React style object.
Frequently asked questions
Blur softens the shadow edge outwards from its shape. Spread grows or shrinks the shape itself before blurring, so a negative spread pulls the shadow in tighter than the element.
Because light does not produce one uniform blur. A tight, dark shadow suggests contact with the surface and a wide, faint one suggests distance from it. Together they read as depth; alone, either reads as a smudge.
No. It is painted outside the box model entirely, so it never shifts anything or adds to the element size. That also means it can overflow a container with hidden overflow and be clipped.
Yes — a large blur radius is costly to repaint every frame. Animate opacity on a pseudo-element carrying the shadow instead, which the compositor can handle without repainting.
Reviews of the Box Shadow Generator
What people who use the Box Shadow Generator think of it. Reviews come from visitors and are posted as written.
No ratings yet
Yours would be the first.
- 5 0 reviews rated 5 stars
- 4 0 reviews rated 4 stars
- 3 0 reviews rated 3 stars
- 2 0 reviews rated 2 stars
- 1 0 reviews rated 1 star
0 reviews
Newest first
No reviews yet
Be the first to rate the Box Shadow Generator. It takes half a minute and no account.
Write the first reviewMore developer tools
ENV to JSON
Turn a .env file into JSON, with quotes, exports and comments handled.
Gitignore Generator
Build a .gitignore from templates for your stack, editor and OS.
Random String Generator
Generate cryptographically random strings over any alphabet you choose.
JWT Verifier
Check a JWT signature against a secret or a public key, and see why it fails.
CSS Formatter
Re-indent a stylesheet, or strip it back to one line.
TOML Formatter
Tidy a TOML file: consistent quoting, ordered tables, keys before headers.
MAC Address Generator
Generate MAC addresses that are correctly marked as locally administered.