Free CSS Box-Shadow & Text-Shadow Generator — Online Tool
Create and customize CSS box-shadow and text-shadow with multiple layers, inset shadows, and live preview on sample elements. Runs entirely in your browser.
What is CSS box-shadow? box-shadow paints a copy of an element's box behind it,
moved and blurred. The value is
offset-x offset-y blur spread color, optionally prefixed with inset to draw the shadow
inside the border box instead. Only the two offsets are required; blur, spread and color default to 0, 0 and the
element's color. Comma-separated values stack, and the first one is painted on top.
How to Use the Shadow Generator
- Pick box or text shadow — Box Shadow shades an element's whole box and supports spread and inset. Text Shadow shades glyphs only, so the spread and inset controls disappear — the property does not accept them.
- Set the geometry of layer 1 — X and Y offset accept -100 to 100, blur 0 to 200 and spread -100 to 100. Positive Y pushes the shadow downward, which is what reads as a light source above the element.
-
Choose color and opacity separately — The swatch sets the hue and the opacity field sets the alpha as a percentage. The two are combined into a single
rgba()value, so you never have to write the alpha by hand. - Stack layers for realistic depth — + Add Layer appends another shadow to the same property. A tight, darker layer plus a wide, fainter one is what separates a designed shadow from a flat grey halo.
- Try inset for inner shadows — Ticking Inset paints the shadow inside the border box, which is how pressed buttons, inset wells and recessed inputs are built. It is available in box mode only.
- Copy the CSS or the Tailwind class — Copy Shadow gives the full declaration. Copy Tailwind gives the nearest utility class, and falls back to an arbitrary-value placeholder when the shadow has more than one layer.
How CSS Shadows Are Drawn
A shadow starts as an exact copy of the element's border box — rounded corners included, which is why a shadow on a pill button curves with it. That copy is then moved by the two offsets, grown or shrunk by the spread, blurred, filled with the color, and painted behind the element. The blur is not a hard band: the CSS specification defines it as approximating a Gaussian blur with a standard deviation of half the blur radius, and the transition is centered on the shape's edge. A 20px blur therefore softens roughly 10px outward and 10px inward from where the crisp edge would have been, which is why a large blur looks smaller than the number suggests.
box-shadow: [inset] offset-x offset-y [blur] [spread] [color]
Spread is the control most people skip and it is the most useful one. It resizes the shadow shape before the blur
is applied: a positive value makes the shadow larger than the element on every side, and a negative value pulls it
in. Negative spread combined with a downward offset is the standard trick for a shadow that appears only beneath
an element rather than haloing it — exactly the 0 4px 6px -1px pattern this tool starts with.
Shadows take no space in layout. Unlike a border, they never shift neighboring elements, so adding one on hover cannot reflow the page. They are also purely decorative to assistive technology: nothing about a shadow is announced, so depth must never be the only signal that something is interactive or selected.
box-shadow and text-shadow Are Not the Same Property
| Feature | box-shadow | text-shadow |
|---|---|---|
| Offset X and Y | Required | Required |
| Blur radius | Optional, defaults to 0 | Optional, defaults to 0 |
| Spread radius | Supported | Not supported |
inset keyword | Supported | Not supported |
| Multiple layers | Comma separated, first on top | Comma separated, first on top |
| Follows border-radius | Yes | Not applicable — follows glyph outlines |
| Affects layout | No | No |
Because text-shadow rejects a fourth length, pasting a box-shadow value into it silently produces nothing. That is why switching this tool to text mode removes the spread field rather than leaving it to be ignored.
How the Tailwind Class Is Chosen
The Tailwind output is a nearest match, not a conversion. It runs only when a single layer is present and classifies it by vertical offset, blur and opacity:
| Class | Matched when a single layer has |
|---|---|
shadow-none | X, Y, blur and spread all zero |
shadow-sm | Opacity at or below 5% and blur at or below 4px |
shadow | Y at or below 2px and blur at or below 4px |
shadow-md | Y at or below 4px and blur at or below 6px |
shadow-lg | Y at or below 8px and blur at or below 12px |
shadow-xl | Y at or below 12px and blur at or below 16px |
shadow-2xl | Y at or below 16px and blur at or below 24px |
shadow-[...] | More than one layer, or values outside every band above |
Treat it as a starting point. Tailwind's own presets are themselves two-layer shadows, so a single-layer value can never map exactly, and a customised theme changes the numbers entirely. When the output shows the bracket placeholder, use the CSS instead or write an arbitrary value with underscores in place of spaces.
Making a Shadow Look Real
The single biggest improvement is layering. One shadow gives you a flat grey halo; two or three give you depth, because that is closer to how light actually behaves. Use a tight, slightly darker layer with a small offset and small blur for contact shadow — the darkening immediately under an object — and a wide, much fainter layer with a larger offset and blur for the ambient shadow that falls further away. Each additional layer should be fainter and softer than the one before it.
Keep one light source for the whole interface. If cards cast their shadow downward, every other raised element must too; a modal offset down-right beside a card offset straight down reads as a mistake even to people who cannot say why. Offsets should also grow with elevation: a resting card might sit at 2px with 4px of blur, a dropdown at 8px with 16px, a modal at 24px with 48px. Larger blur and larger offset together are what communicate distance from the surface.
Two color choices matter more than the geometry. First, pure black rarely looks right — real shadows take on the
hue of the surface they fall on, so a shadow tinted toward the background's hue at low opacity looks considerably
more natural than rgba(0, 0, 0, 0.2). Second, dark interfaces barely register shadows at all, because
a dark shadow on a dark background has almost no contrast. Dark themes usually signal elevation with a lighter
surface color instead, sometimes with a faint light-colored inset along the top edge to imply a lit rim.
- Blur approximates a Gaussian with sigma of half the radius, centered on the edge.
- Spread resizes the shadow before blurring; negative spread hides the halo.
- Two or three layers of decreasing strength beat one strong shadow.
- One light source, and offsets that grow with elevation.
- Tint the shadow rather than using pure black; dark themes need lighter surfaces instead.
Frequently Asked Questions
In order: horizontal offset, vertical offset, blur radius, spread radius and color, with an optional inset keyword in front. Positive X moves the shadow right and positive Y moves it down. Blur softens the edge, spread grows or shrinks the shadow shape before blurring, and the color is usually a low-alpha rgba(). Only the two offsets are required — box-shadow: 2px 2px red is valid and produces a hard-edged shadow.
They shade different things and take different values. box-shadow shades the element's border box, follows its border-radius, and accepts both a spread radius and the inset keyword. text-shadow shades the glyph outlines themselves and accepts neither — a fourth length makes the whole declaration invalid, so the shadow simply does not render. Both accept comma-separated layers, painted first-on-top.
It resizes the shadow shape before the blur is applied, in every direction at once. A spread of 4px makes the shadow 4px larger than the element on all sides; a spread of -4px shrinks it by 4px. Negative spread is what stops a shadow from peeking out around the sides of an element — pair it with a positive Y offset and the shadow appears only underneath, which is the standard look for cards and dropdowns.
Three usual reasons. You are in text mode, where inset is not part of the property at all. The element has an opaque child or background painted over the shadow — an inset shadow sits above the element's own background but below its content, so a full-bleed child image will cover it. Or the offsets and blur are too small relative to the padding for the shadow to reach anywhere the eye notices.
Use box-shadow for depth: it does not affect layout and follows the border radius. Use a border when you need a crisp line that participates in the box model. Use outline for focus rings, since it also sits outside layout and is what browsers reset. Use the filter: drop-shadow() function when the shadow must follow a non-rectangular shape — a PNG with transparency, an SVG icon, or an element with clip-path — because box-shadow always traces the rectangle.
A static shadow is cheap. The costs appear when you animate one: changing box-shadow forces a repaint on every frame, and very large blur radii on large elements are expensive to rasterize. The usual fix is to put the target shadow on an absolutely positioned pseudo-element and animate its opacity instead, since opacity is composited rather than repainted. Keep an eye on blur values above roughly 50px on full-width elements.
It is a rough band match, and only for a single layer. Tailwind's built-in shadows are themselves two-layer values, so a one-layer shadow can never be an exact equivalent, and any customised theme shifts the numbers. When the output reads shadow-[...] your shadow is outside every band — use the CSS declaration, or write an arbitrary value such as shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)], remembering that Tailwind requires underscores in place of spaces.
No. Every layer, the color conversion and the generated declaration are computed in JavaScript on this page and applied directly to the preview elements. Nothing is sent to a server or logged. The only thing that travels is the URL, which encodes your layers so a specific shadow can be bookmarked or shared with a colleague.
Use Cases
Defining an Elevation Scale
Fix three shadows once — resting card, dropdown, modal — and store them as tokens so every component raises by the same amount.
Making Hero Text Readable Over a Photo
A soft dark text-shadow lifts a headline off a busy image when a full overlay would wash the photograph out.
Building a Two-Layer Realistic Shadow
Stack a tight contact shadow under a wide ambient one and compare it against the single-layer version on the same card.
Pressed and Inset States
Use an inset shadow to make a toggle or segmented control read as depressed rather than merely recolored when active.
Replacing a Border with Depth
A very faint shadow separates a panel from its background without adding a hard line, and unlike a border it never changes the element's size.