CSS Box Shadow Generator

CSS Box Shadow Stack

Shadow preset:

Choose a starter stack for cards, modals, inset fields, glows, and hard offset treatments.

CSS selector:

Use a class, element, or state selector such as .shadow-card or .button:hover.

Code format:

Class rule is the default; declaration and custom property are useful for design tokens.

Shadow layers:

Open a layer to tune offset, blur, spread, color, opacity, and inset mode.

X offset:

Horizontal offset in px.

Y offset:

Vertical offset in px.

Blur radius: {{ formatCssNumber(layer.blur) }}px

0 creates a sharp edge; use higher values for softer elevation.

Spread radius: {{ formatCssNumber(layer.spread) }}px

Negative spread helps large soft shadows stay tight near the element.

Color:

Pick the base shadow color.

Opacity: {{ Math.round(clampNumber(layer.opacity, 0, 1) * 100) }}%

Layer alpha from transparent to fully opaque.

Inset shadow

Inset paints inside the element instead of outside its border box.

Preview shape:

Preview the same shadow on a card, button, modal, input, or chip.

Preview surface:

Try the shadow on light, cool, dark, or transparent-grid backgrounds.

Preview size:

Width and height of the preview object.

x px

Preview radius: {{ previewRadius }}px

Only affects the live preview shape.

Include source comment

Adds a short generator note at the top of the CSS output.

{{ cssCode }}

Layer	State	Type	Offset	Blur / spread	Color	CSS fragment	Copy
{{ row.layer }}	{{ row.state }}	{{ row.type }}	{{ row.offset }}	{{ row.blurSpread }}	{{ row.color }}	`{{ row.fragment }}`

Embed:

Customize

Include current inputs

Size

Advanced

Width

Height

Aspect ratio

Max height

Collapsible embed

Allow fullscreen

Referrer policy

Sandbox tokens

Shadows in interface design are not only decoration. They help the eye separate surfaces, show which object sits above another, and make states such as hover, focus, pressed, inset, or active feel more deliberate. CSS expresses those effects through box-shadow, but the visual result comes from several values working together: offset, blur, spread, color, opacity, and whether the shadow is outside or inside the element.

A box shadow is painted around the element's border box. It does not change the element's layout width, height, margin, or the space reserved for neighboring content. That distinction matters in real components. A wide modal shadow may look balanced on an empty canvas and still be clipped by an overflow-hidden wrapper. A small card shadow may be invisible on a dark surface. A hard offset may read as a graphic style rather than physical elevation.

Offset: The horizontal and vertical shift from the element. Positive x moves right, and positive y moves down.
Blur: The softness of the edge. Larger blur values make the shadow wider and lighter.
Spread: The expansion or contraction of the shadow shape before the blur is applied.
Alpha: The opacity of the shadow color. Subtle elevation often needs low alpha; glows and hard offsets often need more.
Inset: A shadow mode that paints inside the element instead of outside its edge.

Diagram showing box-shadow offset, blur, spread, and inset behavior

Different shadow patterns solve different visual problems. A short contact shadow can give a card a clean edge without making the page feel heavy. A larger ambient shadow can make a dialog feel closer to the reader. An inset shadow can make a field or pressed button feel recessed. A colored glow usually signals emphasis or theme, not natural depth.

Common box-shadow patterns and practical cautions
Pattern	Where it helps	What can go wrong
Soft elevation	Cards, menus, popovers, and calm dashboard panels.	Large blurs can crowd nearby content because they do not reserve layout space.
Deep modal	Dialogs, overlays, and surfaces that must stand apart from the page.	On small panels, the same shadow can look heavier than the component itself.
Inset field	Inputs, pressed controls, recessed wells, and inner borders.	Strong inset shadows can lower the contrast of text, icons, or placeholder copy.
Neon glow	Dark themes, active states, brand accents, and game-like controls.	The glow may disappear on light surfaces or overpower nearby labels.
Hard offset	Poster-like cards, editorial badges, and bold graphic systems.	It reads as a separate flat shape, not as realistic elevation.

The common mistake is treating one copied value as a universal elevation scale. The same stack can look refined on a large white card, weak on a dark canvas, clipped inside a narrow container, or distracting when repeated across many buttons. Shadow values become useful only after they are reviewed against the real element size, border radius, page background, spacing, and state cues around them.

How to Use This Tool:

Start from a preset, tune the visible shadow layers, then copy the CSS format that matches how the value will be reused. The preview shows the current visual treatment, and the ledger makes each shadow layer auditable before the value is pasted into a stylesheet.

Choose a Shadow preset. Soft card, Floating modal, Material elevation, Inset input, Neon glow, and Hard offset load practical starting stacks; editing a layer moves the setup toward a custom stack.
Set the CSS selector when you want a full selector rule, custom property wrapper, @layer utility, or SCSS variable. Empty or unsafe selector text is cleaned and falls back to a safe card selector.
Pick a Code format. Selector rule is the default; Declaration only is best for pasting into an existing block; CSS custom property and SCSS variable outputs are useful for tokens; CSS @layer wraps the rule for utility-layer workflows.
Open a shadow layer and adjust x offset, y offset, blur, spread, color, opacity, and inset. Disable a layer to compare without losing it, reorder layers when the contact shadow should paint nearest to the element, or add a new layer when one shadow cannot carry both edge and depth.
Use Advanced to change Preview shape, Preview surface, preview width, preview height, and preview radius. These settings change the sample object only; the copied shadow value still comes from the layer stack.
Check Shadow Preview and Box Shadow CSS. If the summary or CSS reads box-shadow: none;, every layer is disabled and the output intentionally removes the shadow.
Use Layer Ledger to copy, download, or export row-level shadow details. Use JSON when another workflow needs the preset, selector, summary, CSS output, layers, and preview settings together.

Interpreting Results:

The summary gives the fast read: active layer count, outer versus inset count, and a profile such as Soft elevation, Deep elevation, Glow stack, Hard edge, Inset treatment, or No shadow. Use that profile as a label for the current stack, not as a design approval. The rendered component still has to work in the real page context.

CSS box shadow result surfaces and review cues
Result surface	What it shows	What to verify
Shadow Preview	A rendered sample using the selected shape, surface, size, and radius.	Whether the shadow is clipped, too faint, too heavy, or crowded at the intended component size.
Box Shadow CSS	The generated selector rule, declaration, custom property, `@layer` block, or SCSS variable.	Selector text, output mode, and whether `box-shadow: none;` is the wanted output.
Layer Ledger	Each layer's state, type, offset, blur, spread, color, opacity, and CSS fragment.	Layer order, disabled rows, opacity, and whether outer and inset shadows are mixed on purpose.
JSON	A structured snapshot of the preset, selector, summary, CSS, layers, and preview settings.	Whether the receiving workflow expects pixel lengths, `rgba()` colors, and the same layer order.

Layer order deserves a separate check. CSS paints the first listed shadow closest to the element, so a small contact shadow usually belongs before a large ambient shadow. Reversing that order can make a wide soft shadow cover the crisp edge that gives the component weight.

A good preview does not guarantee a good production shadow. Test the copied CSS on the real background, at the real component size, with real text and nearby content. This is especially important for glows, inset fields, and dark surfaces where contrast changes the perceived result.

Technical Details:

The CSS box-shadow property accepts none or a comma-separated list of shadow layers. Each layer uses two required offsets, optional blur and spread lengths, an optional color, and optional inset. The generator emits explicit pixel lengths and rgba() colors so the copied value is predictable across formats.

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

Offsets position the shadow relative to the border box. A positive horizontal offset moves the shadow right, a negative horizontal offset moves it left, a positive vertical offset moves it down, and a negative vertical offset moves it up. Blur radius cannot be negative in valid CSS. Spread can be negative, which is useful when a large blur should stay visually close to the element.

CSS box shadow value parts and generator ranges
Value part	CSS meaning	Generator handling
`offset-x`	Horizontal displacement from the element.	Clamped from -200 px to 200 px.
`offset-y`	Vertical displacement from the element.	Clamped from -200 px to 200 px.
`blur-radius`	Edge softness. Zero creates a sharp edge.	Clamped from 0 px to 240 px.
`spread-radius`	Expansion or contraction before blur is applied.	Clamped from -120 px to 120 px.
`color`	Shadow color, usually paired with alpha.	Accepted as hex color and emitted as `rgba()`.
`inset`	Paints the shadow inside the border box.	Available as a per-layer switch.

Outer shadows follow the element's border radius and are drawn outside the border edge. Inset shadows are drawn inside the border box and can sit above the background while still leaving content visible. That is why the preview radius can change the feel of the sample without appearing in the generated box-shadow declaration.

CSS box shadow output formats
Code format	Generated shape	Useful when
Selector rule	`.selector { box-shadow: ...; }`	You want a complete stylesheet rule.
Declaration only	`box-shadow: ...;`	You are pasting inside an existing rule.
CSS custom property	A `:root` token plus a selector using `var()`.	The shadow belongs in a reusable design token.
CSS `@layer` utility	A rule wrapped in `@layer utilities`.	You organize utilities by cascade layer.
SCSS variable	A variable assignment plus a selector rule.	Your stylesheet source uses SCSS tokens.

All generated CSS, CSV, DOCX export data, and JSON snapshots are produced from the settings in the browser page. No server request is needed to calculate the shadow value, render the preview, copy the CSS, or prepare downloads.

Limitations and Privacy Notes:

The preview is a controlled sample. Parent overflow, stacking context, page background, border radius, component density, and neighboring content can change the final result. Browser rendering can also make very large blurs and fractional values look slightly different across engines and displays.

Shadows should not be the only cue for an interactive state. Focus, hover, pressed, disabled, and validation states still need accessible contrast, visible outlines where appropriate, and enough spacing for touch or pointer use. A glow or inset effect can support those states, but it should not replace the state indicator users rely on.

The generator works from browser-side settings. Avoid putting private project names, client names, or unreleased selector names into copied examples unless those names are meant to leave your working environment through CSS, CSV, DOCX, or JSON exports.

Worked Examples:

Quiet product card

The Soft card preset starts with two active outer shadows: 0 2px 5px -2px rgba(15, 23, 42, 0.10) and 0 18px 44px -24px rgba(15, 23, 42, 0.18). The first layer gives the edge a nearby contact shadow, while the second adds a broader lift. Check Shadow Preview on the light and cool surfaces before copying the selector rule.

Dialog that feels too heavy

The Floating modal preset uses three outer layers, including a wide 0 28px 72px -28px ambient shadow. If the modal feels heavy on a small panel, reduce that widest layer's opacity before deleting the small edge layer. The Layer Ledger should still show a crisp near layer and a softer far layer.

Recessed input state

The Inset input preset keeps both shadows inside the element. One layer creates the recessed edge, and another adds a subtle blue inner line. Use the input preview shape, then test with real placeholder text or icons because inset shadows compete directly with foreground contrast.

Disabled stack recovery

If every layer switch is off, the summary changes to box-shadow: none and Box Shadow CSS exports a removal declaration. Re-enable a layer, add a new layer, or reset the preset unless removing the shadow is the intended cleanup.

Advanced Tips:

Use a small first layer for contact and a larger later layer for distance. That keeps the element grounded while still adding soft elevation.
Use negative spread with large blur values when a shadow should stay tight around a card instead of turning into a visible haze.
Check Neon glow on the dark surface first, then switch to light or grid if the same token may appear in mixed themes.
Keep Preview radius close to the real component radius. The exported value will not include radius, but the rendered shadow follows it.
Copy Layer Ledger CSV or DOCX when a design review needs individual layer values instead of only the final CSS declaration.
Use the CSS custom property or SCSS variable format when the shadow will be reused across cards, menus, and states.

FAQ:

Why does the first shadow in the list matter?

CSS paints the first listed shadow closest to the element. Put crisp contact shadows before wider ambient shadows when the near edge should stay visible.

Why use negative spread with a large blur?

Negative spread tightens the shadow shape before blur is applied. It helps soft elevation stay connected to the element instead of becoming a large haze.

Why does the copied CSS sometimes say box-shadow: none;?

That output appears when every layer is disabled. Re-enable a layer, add a new layer, or reset the preset unless removing the shadow is the intended result.

Can a shadow replace a border or outline?

A shadow can create a visual edge, but do not rely on a subtle shadow alone for focus or validation states. Check contrast and visible focus treatment separately.

Why does the preview radius not appear in the CSS output?

Preview radius changes only the sample shape. The exported shadow value contains the layer offsets, blur, spread, color, opacity, inset state, and ordering.

Glossary:

Box shadow: A CSS effect that paints one or more shadows around or inside an element's border box.
Layer stack: The comma-separated list of shadows in one box-shadow declaration.
Contact shadow: A short shadow near the element that makes the edge feel attached to the surface below it.
Ambient shadow: A wider, softer shadow that suggests distance from the background.
Inset shadow: A shadow drawn inside the element, often used for recessed fields or pressed states.
CSS custom property: A reusable CSS variable name, such as --shadow-card-shadow, that can hold a shadow token.

References:

CSS Backgrounds and Borders Module Level 3, Drop Shadows, W3C, 11 March 2024.
box-shadow, MDN Web Docs, May 23, 2026.