Color Tools

CSS Box Shadow Generator

Generate CSS box-shadow with sliders for X/Y offset, blur, spread, color, and opacity. Toggle inset mode and copy the ready-to-use CSS instantly.

X / Y / Blur / Spread
Opacity Slider
Inset Toggle
Live Preview
Copy CSS

x4px

y4px

blur8px

spread0px

Opacity0.25

Color

css

box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.25);

Understanding CSS Box-Shadow Mechanics

The CSS box-shadow property attaches one or more shadow effects to an element frame. Well-crafted shadows establish visual hierarchy, convey elevation in design systems (such as Material Design and Human Interface Guidelines), and provide subtle depth cues without cluttering the interface.

Box-Shadow Syntax & Parameters

The property accepts horizontal and vertical offsets, blur radius, spread radius, colour, and an optional inset keyword:

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

Parameter	Type	Description
`offset-x`	Length (`px`, `rem`)	Positive values position shadow right; negative values move it left
`offset-y`	Length (`px`, `rem`)	Positive values position shadow below; negative values move it above
`blur-radius`	Length (`px`)	Standard Gaussian blur radius. Defaults to 0 (sharp edge)
`spread-radius`	Length (`px`)	Positive expands shadow size; negative contracts it
`color`	CSS Color	Hex, RGB, or HSL value (prefer semi-transparent alpha channels)
`inset`	Keyword	Casts the shadow inside the frame instead of outside

Crafting Natural Multi-Layered Shadows

In the physical world, shadows are soft and diffused because light scatters across surfaces. A single harsh CSS shadow often looks artificial. Professional UI designers stack multiple complementary shadow layers:

/* Elevation Level 2: Soft Natural Ambient Shadow */
.card-elevation-2 {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Elevation Level 4: Floating Modal / Dropdown */
.modal-elevation-4 {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.06),
    0 10px 24px -3px rgba(0, 0, 0, 0.12),
    0 0 1px 0 rgba(0, 0, 0, 0.08);
}

Performance & GPU Rendering Tips

Avoid Excessive Blur: Massive blur radii ($>50\text{px}$) force browsers to recompute large raster regions on repaint.
Layer Promotion: When animating elevation states on hover, prefer animating the transform: translateY() or animating opacity on a pseudo-element rather than transitioning box-shadow directly.

Advanced Elevation Styling & Accessibility Guidelines

Contrast with Background: Soft dark shadows blend naturally on light themes, while dark themes require inverted semi-transparent light highlights or subtle border outlines (rgba(255,255,255,0.08)) to indicate depth.
Layering with Border: Stacking a fine 1px border alongside a box-shadow ensures clear boundary demarcation on screens with variable brightness or contrast settings.
Component States: Elevate shadow intensity on :hover and :focus-visible states to convey interactive affordance.

Frequently Asked Questions

How does the spread radius parameter modify CSS box-shadow appearance?: While the blur radius softens and feathers shadow edges via Gaussian blur, the spread radius physically expands or contracts the shadow geometry before the blur is calculated. Positive spread expands the footprint; negative spread pulls the shadow inward.
Why is multi-layer shadow stacking preferred in modern design systems?: Physical light diffuses across surfaces from multiple angles. Stacking a small sharp ambient shadow with a larger soft diffused shadow simulates authentic natural depth and optical realism on flat digital screens.
What CSS properties does this generate?: This tool generates a CSS box-shadow property with configurable X offset, Y offset, blur radius, spread radius, color, opacity, and inset toggle.
Can I add multiple shadows?: This version generates one shadow layer. CSS supports multiple comma-separated layers, which you can add around the generated declaration when your design needs them.
Does it support inset shadows?: Yes. Toggle the Inset option to make a shadow appear inside the element instead of outside.
How do I use the CSS in my project?: Copy the declaration from the code block, then paste it into a stylesheet or component style.

Accuracy & Advisory Notice: CSS Box Shadow Generator

This website and utility are provided for general informational, calculation, and educational purposes only. Always verify critical computation outputs prior to professional deployment or financial use. See our Terms of Service and Privacy Policy for full governance details.

Loading tool...

Understanding CSS Box-Shadow Mechanics

Box-Shadow Syntax & Parameters

The property accepts horizontal and vertical offsets, blur radius, spread radius, colour, and an optional inset keyword:

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

Parameter

Type

Description

offset-x

Length (px, rem)

Positive values position shadow right; negative values move it left

offset-y

Length (px, rem)

Positive values position shadow below; negative values move it above

blur-radius

Length (px)

Standard Gaussian blur radius. Defaults to 0 (sharp edge)

spread-radius

Length (px)

Positive expands shadow size; negative contracts it

color

CSS Color

Hex, RGB, or HSL value (prefer semi-transparent alpha channels)

inset

Keyword

Casts the shadow inside the frame instead of outside

Crafting Natural Multi-Layered Shadows

/* Elevation Level 2: Soft Natural Ambient Shadow */ .card-elevation-2 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.08); } /* Elevation Level 4: Floating Modal / Dropdown */ .modal-elevation-4 { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 10px 24px -3px rgba(0, 0, 0, 0.12), 0 0 1px 0 rgba(0, 0, 0, 0.08); }

Performance & GPU Rendering Tips

Avoid Excessive Blur: Massive blur radii ($>50\text{px}$) force browsers to recompute large raster regions on repaint.

Layer Promotion: When animating elevation states on hover, prefer animating the transform: translateY() or animating opacity on a pseudo-element rather than transitioning box-shadow directly.

Advanced Elevation Styling & Accessibility Guidelines

Contrast with Background: Soft dark shadows blend naturally on light themes, while dark themes require inverted semi-transparent light highlights or subtle border outlines (rgba(255,255,255,0.08)) to indicate depth.

Layering with Border: Stacking a fine 1px border alongside a box-shadow ensures clear boundary demarcation on screens with variable brightness or contrast settings.

Component States: Elevate shadow intensity on :hover and :focus-visible states to convey interactive affordance.

Frequently Asked Questions

How does the spread radius parameter modify CSS box-shadow appearance?

While the blur radius softens and feathers shadow edges via Gaussian blur, the spread radius physically expands or contracts the shadow geometry before the blur is calculated. Positive spread expands the footprint; negative spread pulls the shadow inward.

Why is multi-layer shadow stacking preferred in modern design systems?

Physical light diffuses across surfaces from multiple angles. Stacking a small sharp ambient shadow with a larger soft diffused shadow simulates authentic natural depth and optical realism on flat digital screens.

What CSS properties does this generate?

This tool generates a CSS box-shadow property with configurable X offset, Y offset, blur radius, spread radius, color, opacity, and inset toggle.

Can I add multiple shadows?

This version generates one shadow layer. CSS supports multiple comma-separated layers, which you can add around the generated declaration when your design needs them.

Does it support inset shadows?

Yes. Toggle the Inset option to make a shadow appear inside the element instead of outside.

How do I use the CSS in my project?

Copy the declaration from the code block, then paste it into a stylesheet or component style.