CSS Box Shadow Generator
Stack shadow layers visually and copy clean CSS, a Tailwind class or a whole shadow scale.
Preview
Layers
Layer 1
Presets
Code
Build or import
Smooth shadow builder
Creates several layers whose offset and blur grow toward the values below, each with the same opacity, so together they reach the opacity you set.
Paste a box-shadow
About the CSS Box Shadow Generator
Build a CSS box-shadow by stacking as many layers as you like. Each layer has its own x and y offset, blur, spread, color with opacity, and an inset switch for inner shadows; the preview card shows the result as you drag the sliders, on the page and card colors you choose. Start from a preset — Tailwind’s own shadow-sm to shadow-2xl, smooth multi-layer shadows, elevation levels, soft UI (neumorphism), inner shadows, neon glows or a hard offset — or paste an existing box-shadow to edit it.
Copy the result as CSS, as a Tailwind arbitrary class such as shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)], or turn it into a consistent xs–2xl shadow scale written as CSS variables or a Tailwind v4 @theme block. A smooth-shadow builder creates the layered, eased shadows that look more natural than a single blurry layer.
How to use it
- Pick a preset, or keep the default and change it. Select a layer in Layers to edit it.
- Drag the sliders (or type values) for x, y, blur and spread; set the color and opacity; tick Inset for an inner shadow.
- Use Add layer, the arrow buttons and the eye checkbox to build up, reorder and compare layers. The first layer is drawn on top.
- Adjust the preview’s page color, card color, corner radius and size to match your design.
- Under Code, copy the CSS or the Tailwind class, or choose Shadow scale to export xs–2xl versions.
Examples
Preset: Tailwind md
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
Tailwind CSS v4 defines --shadow-md with exactly these two layers.
Smooth shadow builder: 6 layers, y 32px, blur 32px, opacity 45%, doubling
box-shadow: 0 1px 1px rgb(0 0 0 / 0.095), 0 2px 2px rgb(0 0 0 / 0.095), 0 4px 4px rgb(0 0 0 / 0.095), 0 8px 8px rgb(0 0 0 / 0.095), 0 16px 16px rgb(0 0 0 / 0.095), 0 32px 32px rgb(0 0 0 / 0.095);
Six layers of 9.5% opacity add up to 45% where they overlap: 1 − (1 − 0.095)⁶ ≈ 0.45.
Preset: Tailwind lg · Code: Tailwind class
shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]
Arbitrary values work in Tailwind v3 and v4; underscores stand for spaces.
Common uses
- Designing card, dropdown and modal shadows for a design system, with a matching xs–2xl scale.
- Recreating a shadow from a Figma design: paste its CSS, adjust and copy.
- Making soft UI (neumorphism) buttons, inset input wells and glowing neon accents.
- Turning a single harsh shadow into a smooth layered one.
How box-shadow works
Each layer is written as [inset] x y blur spread color (CSS Backgrounds and Borders Level 3). The offsets move the shadow right and down (negative values move it left and up). Blur must be zero or more; the browser blurs the shadow’s edge like a Gaussian blur with a standard deviation of half the blur radius, so a 20px blur fades over roughly 20px. Spread grows (positive) or shrinks (negative) the shadow before it is blurred — negative spread with a larger y offset gives the tight, lifted look of Tailwind’s shadows. Inset draws the shadow inside the border instead of outside. Several layers are separated by commas and the first one is painted on top. Shadows follow border-radius and never change the size of the layout.
Smooth shadows and shadow scales
Real shadows are dark and sharp close to an object and soft far from it, which a single layer cannot show. Stacking several layers whose offset and blur double each time (1, 2, 4, 8, 16, 32 px), each with the same low opacity, gives that gradual falloff — the Smooth shadow builder does the arithmetic, choosing the per-layer opacity so the overlap reaches the opacity you set.
The shadow scale keeps one design at several sizes: your current shadow becomes the step you choose (md by default) and every other step multiplies offsets, blur and spread by the ratio (1.8 by default), while colors and opacity stay the same. Tailwind v4 reads --shadow-* variables in @theme as the shadow-xs … shadow-2xl utilities.
Soft UI and accessibility
Soft UI (neumorphism) shapes a control with a light and a dark shadow on a background of the same color. It looks good, but the edge of such a button rarely reaches the 3:1 contrast that WCAG 1.4.11 asks for when the edge is what shows where a control is, and a pressed and an unpressed button can be hard to tell apart. Pair it with a visible border, text label or focus ring — the Focus ring preset is a spread-only shadow that does not blur.
Limitations
- Only
box-shadowis generated. For shadows that follow transparent images or text shapes usefilter: drop-shadow()ortext-shadow, which have no spread or inset. - Pasted shadows may use px, rem or em (rem and em are converted at 16px); other units such as vh are not read.
- Large blur values and many layers cost more to paint, especially if the shadow is animated — keep animated shadows small, or animate the opacity of a pseudo-element instead.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
What do the four numbers in box-shadow mean?
In order: horizontal offset, vertical offset, blur radius and spread. 0 4px 6px -1px means no horizontal shift, 4px down, a 6px blur and 1px smaller than the element on each side before blurring.
How do I make an inner shadow?
Tick Inset on a layer, or choose the Inner shadow or Inset well preset. In CSS it is the inset keyword at the start of a layer: inset 0 2px 4px rgb(0 0 0 / 0.06).
How do I use the shadow in Tailwind CSS?
Copy the Tailwind class (an arbitrary value such as shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1)]), which works in Tailwind v3 and v4. For a reusable scale, export Shadow scale as a Tailwind v4 @theme block; it replaces shadow-xs to shadow-2xl with your versions.
Why use several layers instead of one?
One layer has a single blur, so it looks either too sharp or too fuzzy. Several layers with growing offsets and blur imitate how real shadows soften with distance. The smooth-shadow builder and the Elevation presets are built this way.
Can I edit a shadow I already have?
Yes. Paste it under Paste a box-shadow — with or without box-shadow: and in any CSS color format — and select Import. Each layer appears in the editor.
Is anything uploaded?
No. The shadow is built in your browser and the page works offline once loaded.