{{ summaryTitle }}
{{ summaryValue }}

{{ summaryLine }}

Active {{ resultsReady ? computation.values.active_layer_count : '—' }} Inset {{ resultsReady ? computation.values.inset_layer_count : '—' }} Format {{ resultsReady ? outputModeLabel : '—' }}
Start with a card, modal, inset, glow, elevation, or hard-offset treatment.
For example, .shadow-card or .button:hover. Unsafe braces and semicolons are removed.
The selected wrapper changes the generated code while preserving the same shadow stack.
Shadow layers:
Open a layer to tune offset, blur, spread, color, opacity, and inset mode. Up to {{ maxLayers }} layers are supported.
Horizontal displacement from -200 px to 200 px.
px
Vertical displacement from -200 px to 200 px.
px
{{ formatCssNumber(layer.blur) }}px
Zero creates a sharp edge; higher values create softer elevation.
{{ formatCssNumber(layer.spread) }}px
Negative spread keeps large soft shadows close to the element.
Use a six-digit #RRGGBB color.
{{ Math.round(numberOrZero(layer.opacity) * 100) }}%
Layer alpha from transparent to fully opaque.
Inset paints inside the element instead of outside its border box.
{{ layer.inset ? 'Enabled' : 'Disabled' }}
Changes only the sample object, not the generated shadow declaration.
Use the background that best matches the component context you need to judge.
Use a width from 120 px to 420 px. The preview fits its canvas while preserving these proportions.
px
Use a height from 44 px to 280 px.
px
{{ preview_radius }}px
Changes only the live sample shape.
The neutral default is off; enabling it adds a short generator note above the CSS.
{{ include_comment ? 'Enabled' : 'Disabled' }}
{{ computation.values.css_code }}

The chart renderer is unavailable. Layer values remain available in the preview and ledger.

LayerStateTypeOffsetBlur / spreadColorCSS fragmentCopy
{{ row.label }}{{ row.state }}{{ row.type }}{{ row.offset }}{{ row.blur_spread }}{{ row.color }}{{ row.fragment }}
CSS Gradient Generator Build CSS gradients using linear, radial or conic geometry with exact color stops and optional modern interpolation spaces for copy-ready stylesheets.
CSS Border Radius Generator Generate circular or elliptical border-radius CSS, inspect clockwise corner values, and check whether the browser will scale overlapping curves.
Color Palette Generator Generate a seeded HEX palette with fixed harmony rules, black-or-white text choices, and WCAG contrast checks for every color pair.
CSS Flexbox Generator Build Flexbox container and optional child-sizing CSS with axis-aware alignment, wrapping warnings, plus a live preview and starter HTML.

A box shadow changes how an element relates to the surface around it. A small, tight shadow can separate a card from its background; a broad, faint shadow can suggest ambient elevation; a sharp offset creates a graphic edge; and an inset shadow makes the surface appear recessed.

The effect comes from several values working together. Horizontal and vertical offsets move the shadow, blur softens its edge, spread expands or contracts its starting shape, and color opacity controls visual weight. Changing only one value can alter the apparent depth more than adding another layer.

ValueVisual effectCommon mistake
X and Y offsetMoves an outer shadow left, right, up, or downUsing a large offset where a centered glow was intended
Blur radiusWidens and softens the edgeIncreasing opacity to compensate for an over-wide blur
Spread radiusExpands positive values and contracts negative values before blurTreating spread as another offset
InsetPaints the effect inside the elementUsing an inner shadow when the element should appear raised

Multiple shadows are painted front to back. The first entry sits closest to the element and later entries appear behind it. That order is useful for pairing a tight contact shadow with a larger ambient shadow, but it also means reordering identical values can change the result.

Shadow is a supporting cue, not a complete interaction state. Focus, error, pressed, and disabled states still need visible outlines, borders, text, or other non-shadow signals. Shadows can disappear in forced-colors mode and can be clipped by ancestor overflow in a real layout.

How to Use This Tool:

Build the visual effect first, then choose the code wrapper needed by the stylesheet.

  1. Load the closest Shadow preset or keep the current custom stack. Presets are editable starting points rather than design standards.
  2. Open each layer and set X offset, Y offset, blur, spread, color, opacity, and inset mode. Disable a layer to compare the stack without deleting its values.
  3. Reorder layers when a tight edge should sit in front of a broad shadow. Add or duplicate only when the new layer has a distinct job.
  4. Choose the Code format and enter the selector used by rule, custom-property, cascade-layer, or SCSS output.
  5. Try the preview on a surface close to the real component background, then copy the declaration and verify it in the production layout.

Interpreting Results:

Read the generated box-shadow value as the source of truth. The preview helps compare weight and edge softness, while the layer profile makes redundant blur and spread values easier to spot. Labels such as Soft elevation, Deep elevation, Glow stack, and Hard edge are design aids derived from the current values, not CSS categories.

  • Test the declaration against the real background and neighboring content.
  • Check ancestor overflow, border radius, and clipping when the outer shadow appears cut off.
  • Reduce opacity or separate blur sizes when several layers merge into one muddy edge.
  • Keep a border or outline for any state that must remain visible without shadows.

Technical Details:

The CSS value is an ordered, comma-separated list. Every enabled layer becomes one shadow fragment; disabled layers remain in the editing ledger but are omitted from the declaration. If all layers are disabled, the result is box-shadow: none;.

Transformation Core

Each enabled row is serialized in CSS order. The optional inset keyword comes first, followed by horizontal offset, vertical offset, blur radius, spread radius, and an explicit RGBA color.

inset?  x-offset  y-offset  blur-radius  spread-radius  rgba(red, green, blue, alpha)

Hex color channels are converted to decimal red, green, and blue values. Opacity is written as alpha rounded to two decimal places. Length values are rounded to at most two decimals and use pixels.

InputAccepted range or formOutput effect
Layers1 to 12 stored rowsOnly enabled rows are serialized.
X and Y offset−200px to 200pxSigned displacement in each direction
Blur0px to 240pxZero is sharp; negative blur is invalid.
Spread−120px to 120pxNegative values contract; positive values expand.
Color#RRGGBBConverted to RGBA with the layer opacity
Opacity0 to 1, inclusiveZero is transparent; one is fully opaque.

Selector text is trimmed, repeated whitespace is collapsed, braces and semicolons are removed, and the result is limited to 120 characters. An empty selector falls back to .shadow-card. The same ordered shadow list can be wrapped as a selector rule, declaration, CSS custom property, @layer utility, or SCSS variable without changing the layer values.

Preview shape, surface, width, height, and radius do not change the generated shadow. They only provide a comparison surface, so they cannot model every stacking context, overflow boundary, transformed ancestor, or page background.

Worked Examples:

Quiet card elevation

A tight layer such as 0 2px 5px -2px can define the contact edge, while a second low-opacity layer with much more blur provides ambient separation. Keeping the broad layer behind the tight one preserves a readable edge.

Recessed input

Two inset layers can pair a soft inner shadow with a one-pixel colored spread. The combination may suggest depth and focus, but the input still needs a visible border or outline so the state survives forced colors.

References: