◐ Web & Design

CSS Box Shadow Generator (Layered Shadows)

Design layered CSS box shadows with offset, blur, spread, color and opacity per layer, inset shadows and presets, previewed on light and dark backgrounds.

Up to 8 layers Light & dark preview Inset shadows Tailwind class

Loading Box Shadow…

What this page sends

Your input: Processed in this tab and not sent to a server.
Page load: Loading the page requests HTML, scripts and images from ByteKiln, fonts from Google Fonts, and sends Google Analytics page views, tool-usage events and catalog interactions (tool/category IDs, result status and whether a click followed search — never your input, output or search terms). Privacy & sharing

How the CSS Box Shadow Generator (Layered Shadows) Works

A good shadow makes an element look lifted; a bad one makes it look smudged. The difference is usually layering: real shadows are tight and dark near the object and soft further away, which a single box-shadow can't reproduce. This generator lets you build shadows from up to eight layers, each with its own horizontal and vertical offset, blur, spread, color and opacity, and switch any layer to inset. Start from a preset — subtle, medium, elevated (the same values Tailwind uses), a five-layer smooth shadow, or an inset — and adjust from there. The preview shows the element on a light and a dark background at once, with an adjustable corner radius, because a shadow that works in one theme often vanishes in the other. The output is a box-shadow declaration with one layer per line, and a Tailwind arbitrary-value class. The tool warns about layers that are fully transparent or hidden behind the element, negative blur (which makes browsers ignore the whole declaration), and layer counts that get expensive to paint.

The box-shadow syntax

Each layer is [inset] x y blur spread color. Offsets can be negative; blur can't. Spread defaults to 0 and is omitted when it is. Layers are listed front to back — the first one is painted on top.

Color and opacity

Colors can be any CSS color; the opacity slider multiplies the color's own alpha. Semi-transparent colors are written as rgb(r g b / a), which every current browser supports.

Presets

Subtle, Medium and Elevated match Tailwind's shadow-sm, shadow-md and shadow-xl values. Layered uses five layers doubling in size with low opacity each, a common technique for soft, realistic depth.

Validation

Every generated declaration is checked to parse in a real browser engine. Negative blur is rejected with an explanation instead of producing CSS the browser would silently drop.

Limitations

Up to eight layers of box-shadow; it doesn't generate filter: drop-shadow() (which follows an element's shape) or text-shadow.
The preview shows a plain card on light and dark backgrounds; real UI with borders, gradients or transforms may need tuning.
Heavy, blurred multi-layer shadows cost paint time on low-end devices, especially when animated.
Colors are written as rgb(r g b / a), which every current browser supports but very old ones (Internet Explorer, early Safari) do not.

FAQ

Short answers for the things developers usually ask before trusting a tool.

Is anything uploaded?

No. Shadows are built in your browser.

Why use several shadow layers?

Real shadows have a sharp, dark core close to the object and a soft, wide falloff. One box-shadow can't do both. Stacking a few layers with increasing offset and blur (the "Layered" preset) gives a much more natural result than a single large blur.

What does spread do, and why is it often negative?

Spread grows (positive) or shrinks (negative) the shadow before it is blurred. A negative spread with a vertical offset keeps the shadow from peeking out at the sides, so it appears only below the element — that's how Tailwind's shadow-md and shadow-lg are built.

Why does my shadow disappear on a dark background?

A black shadow on a near-black background has almost no contrast. The preview shows both backgrounds side by side; for dark themes use stronger opacity, a larger blur, or replace the shadow with a lighter border or a subtle highlight.

Are many shadows bad for performance?

Blurred shadows are painted by the browser, and large blurs on many elements — or animated shadows — can cost frame time on low-end devices. The tool caps layers at 8 and warns above 5. To animate a shadow, animate the opacity of a pseudo-element that carries it instead.

Related tools

Useful follow-ups when one conversion usually turns into three more.

web-design