How does multi-layer box shadow differ from a single shadow?

Single shadows produce uniform radial blurring. Multi-layer shadows simulate optical physics by separating tight contact shadows near the element edge from soft ambient light falloff.

What is the function of the spread radius parameter?

Spread expands (positive value) or contracts (negative value) the shadow shape before blur calculations are computed.

Can I use the generated output in Tailwind CSS?

Yes. The generator exports both pure CSS declarations and Tailwind arbitrary shadow classes directly.

Free & Private Online Browser Utility

CSS Box Shadow Generator: Layered Shadows

Generate realistic multi-layered CSS box shadows, ambient occlusion, and directional elevation profiles in real time. The designer supports independent X and Y offset controls, blur radius, spread radius, inset shadows, and light angle presets (top, top-left, center, bottom). Real-time CSS and Tailwind CSS classes update in real time in your browser session with zero server uploads.

How to use

Step 1: Configure Shadow Layers

Adjust horizontal offset, vertical offset, blur radius, and spread distance for up to four distinct layers.
Step 2: Set Color & Light Direction

Select shadow RGBA colors, opacity, and choose lighting angle presets to adjust layer positions.
Step 3: Copy CSS or Tailwind Code

Click to copy production-ready box-shadow declarations or Tailwind shadow utility classes.

Options explained

Multi-Layer Stacking

Combines up to four independent shadow layers to create natural ambient lighting and realistic depth falloff.

When to use: Use when crafting modern cards, dialog modals, floating dropdowns, and button elevation styles.

Light Angle Presets

Calculates proportional X and Y offset vectors according to directional light sources.

When to use: Use to align component lighting consistently with top-left, top, or centered light sources.

Inset Mode

Toggles the inset shadow parameter to render internal recessed wells and sunken input fields.

When to use: Use when designing pressed button states, inset text fields, and tactile interface controls.

Worked example

Input: Two-layer ambient shadow with Y offset 12px and blur 32px

Output: box-shadow: 0px 12px 32px -4px rgba(15,23,42,0.12), 0px 4px 6px -2px rgba(15,23,42,0.08);

Combines a broad ambient diffusion layer with a tight contact shadow for depth.

Tips & limits

Layering a soft diffuse shadow with a tight, high-opacity contact shadow produces natural depth.
Negative spread values pull shadow boundaries inward, preventing muddy outlines around rounded card borders.
Tailwind arbitrary shadow syntax preserves exact pixel and RGBA parameters without config modifications.

Common problems

Shadow appears harsh or dark on light backgrounds: Reduce alpha opacity to between 0.06 and 0.14 and increase blur radius above 24px.
Shadow clips inside parent container: Ensure parent containers have sufficient padding or avoid overflow hidden on elevated elements.

Frequently Asked Questions (FAQ)

How does multi-layer box shadow differ from a single shadow?: Single shadows produce uniform radial blurring. Multi-layer shadows simulate optical physics by separating tight contact shadows near the element edge from soft ambient light falloff.
What is the function of the spread radius parameter?: Spread expands (positive value) or contracts (negative value) the shadow shape before blur calculations are computed.
Can I use the generated output in Tailwind CSS?: Yes. The generator exports both pure CSS declarations and Tailwind arbitrary shadow classes directly.

How to use

Step 1: Configure Shadow Layers

Step 2: Set Color & Light Direction

Step 3: Copy CSS or Tailwind Code