Build a layered CSS box-shadow with a live preview, or paste one and edit it
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 17 Oct 2026.A CSS box-shadow is up to 4 lengths and a colour per layer: horizontal offset, vertical offset, blur, spread, then the colour, with inset for an inner shadow. This generator builds layers with sliders and a live preview, reads a pasted shadow back for editing, and writes text-shadow too.
Start from a preset or paste an existing box-shadow value.
Move the offset, blur and spread sliders and pick the colour and opacity.
Add more layers for a softer, more realistic shadow; tick inset for an inner shadow.
Copy the box-shadow line into your stylesheet.
A good shadow is what makes a card look lifted off the page, and it is usually two or three layers rather than one. Build them with sliders while the preview updates, or paste a shadow you already use and adjust it.
What each value does.
| Value | Effect |
|---|---|
| Offset x, offset y | Moves the shadow right and down; negative values move it left and up |
| Blur | Softens the edge; 0 is a hard edge, and it cannot be negative |
| Spread | Grows or shrinks the shadow before blurring; a negative spread tucks it under the box |
| Colour and opacity | Usually black at 5 to 25 per cent opacity |
| Inset | Draws the shadow inside the box instead |
Layers. Several shadows are separated by commas, and the first one is drawn on top. A realistic shadow combines a small, sharper layer close to the box with a large, faint, blurred one further away; the presets show the pattern.
Reading a pasted shadow. Paste any box-shadow value, with or without the property name, such as values copied from a design tool or a CSS framework. Hex colours, rgb() and rgba() in either syntax, and a few colour names are read. A shadow with no colour uses the text colour, so it is edited as black and the page says so.
Text shadow. Switch to text-shadow for glows, outlines and 3D lettering. Text shadows have no spread and no inset, so those controls disappear.
The output was checked with lightningcss, a production CSS parser, on 300 generated shadows and 17 typical pasted ones: each reads exactly as an independently written equivalent. Nothing leaves your browser.
Each shadow is written as offset-x offset-y blur spread colour, for example 0 4px 12px rgb(0 0 0 / 0.15). The offsets move the shadow, blur softens its edge and spread grows or shrinks it. Several shadows can be listed with commas, and the first in the list is drawn on top.
Spread is the fourth length. A positive spread makes the shadow larger than the box in every direction before it is blurred; a negative spread makes it smaller, which tucks the shadow under the box so only the blurred part shows below it. 0 0 0 3px gives a crisp outline ring.
Use two or more layers with low opacity: a small, tight shadow such as 0 1px 2px at 0.24 opacity for the contact edge, plus a larger one such as 0 10px 15px -3px at 0.1 opacity for depth. The Lifted and Soft presets are built this way.
inset draws the shadow inside the box's border instead of outside it, as if the box were pressed into the page. It suits input fields, pressed buttons and wells. Inset and normal layers can be mixed in one box-shadow, which is how neumorphic designs get their raised and sunken look.
box-shadow follows the element's rectangle, including rounded corners, and supports spread and inset. The filter drop-shadow() follows the visible shape, such as the outline of a transparent PNG or an SVG icon, but has no spread or inset. Use box-shadow for cards and buttons, drop-shadow for cut-out images.
text-shadow accepts only two or three lengths, the offsets and an optional blur, plus a colour; spread and inset belong to box-shadow alone. A fourth length makes the whole declaration invalid, so browsers drop it. Stack several thin text-shadow layers to fake a thicker outline.
Rates and rules change; check the source before you rely on a figure.
Still stuck? Ask about CSS Box Shadow Generator and anybody who knows can answer. No account needed.
On the related tools: Cron Expression Generator – Generate a cron expression by choosing when the job should run · Sitemap Index Generator – Split a large site into numbered sitemaps with an index file · Google Analytics URL Builder – The five utm parameters GA4 reads, with the naming traps flagged.