CSS Box Shadow Generator

About CSS Box Shadow Generator

What Is the box-shadow Syntax?

The full syntax is:

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

Parameter	What It Controls	Typical Values
offset-x	Horizontal position - positive pushes right, negative pushes left	0 to 20px
offset-y	Vertical position - positive pushes down, negative pushes up	2 to 20px
blur-radius	How diffused the shadow is - higher values are softer	4 to 40px
spread-radius	How much the shadow expands or contracts - negative values shrink it	-5 to 10px
color	Shadow colour - typically black with low opacity (rgba)	rgba(0,0,0,0.1) to rgba(0,0,0,0.3)
inset	Moves the shadow inside the element (pressed/recessed effect)	Keyword present or absent

Example output:

box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);

This creates a subtle downward shadow with 4px offset, 16px blur, no spread, and 12% opacity - a common choice for card elevation.

Common Shadow Recipes

Effect	CSS	Use Case
Subtle card	0 2px 8px rgba(0,0,0,0.08)	Light elevation for content cards
Soft modern	0 4px 20px rgba(0,0,0,0.12)	Material Design-style depth
Strong depth	0 8px 30px rgba(0,0,0,0.2)	Modals, popovers, dropdowns
Tight sharp	0 2px 4px rgba(0,0,0,0.15)	Buttons, input focus states
Inner shadow	inset 0 2px 6px rgba(0,0,0,0.1)	Input fields, pressed buttons
Coloured glow	0 0 20px rgba(59,130,246,0.5)	Focus rings, neon effects
Border simulation	0 0 0 2px rgba(0,0,0,0.1)	Borders that do not affect layout (spread, no blur)

Why Use Multiple Shadow Layers?

A single shadow often looks flat. Layering two or three shadows at different blur levels creates more realistic depth, mimicking how light behaves in the real world. The CSS syntax separates layers with commas:

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);

The first shadow (small blur) creates a tight edge definition. The second shadow (larger blur) creates the ambient diffusion. This two-layer approach is used in Google's Material Design and most modern design systems. This tool lets you add, configure, and remove layers independently, generating the combined CSS automatically.

Shadow Design Systems

Design systems like Material Design, Tailwind CSS, and Apple's HIG define elevation levels using shadow scales. Here are typical values at each level:

Elevation	Example Shadow	Use
Level 0 (flat)	none	Default state
Level 1 (raised)	0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)	Cards, sections
Level 2 (elevated)	0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)	Hover states, sticky headers
Level 3 (floating)	0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)	Dropdowns, tooltips
Level 4 (overlay)	0 20px 25px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.04)	Modals, dialogs

Performance Considerations

Box shadows are rendered by the browser's compositor. A few things to keep in mind:

• Animating box-shadow directly triggers repaints and can be slow. For hover effects, prefer transitioning opacity on a pseudo-element that already has the shadow applied.
• Very large blur values (100px+) on many elements can reduce scroll performance on low-end devices.
• Inset shadows are slightly cheaper to render than outset shadows.
• Using will-change: transform on the parent can promote the layer to the GPU and improve animation smoothness.

box-shadow vs drop-shadow vs text-shadow

Property	Applies To	Key Difference
box-shadow	Element's box (rectangle)	Follows the box shape, supports inset and spread
filter: drop-shadow()	Element's alpha channel (including transparent PNGs)	Follows the visible shape, no inset or spread support
text-shadow	Text content only	Same syntax as box-shadow minus spread and inset

Use box-shadow for cards, buttons, and containers. Use drop-shadow for icons, logos, and images with transparency. Use text-shadow for headings and decorative text effects.

How Does the Blur Radius Actually Work?

Blur radius is defined in the CSS Backgrounds and Borders Module Level 3 spec as the standard deviation of a Gaussian blur applied to the shadow. In practice, a shadow with blur radius N extends roughly N pixels beyond the spread edge in a soft falloff. Doubling the blur roughly halves the perceived edge sharpness.

Worked example: A shadow of 0 0 20px black on a 200x100 element creates a halo that is visibly faint at about 20px out from every edge, with the total rendered area being roughly 240x140. If you stack a second layer of 0 0 5px black, the extra tight shadow reinforces the edge, making the element look crisper and more elevated without changing the outer glow. This is why most design systems ship two or three layered shadows rather than one large blur.

Negative spread values contract the shadow. A shadow of 0 10px 15px -5px rgba(0,0,0,0.3) still projects 10px down with a 15px blur, but the -5px spread pulls the shadow inwards on every side, so the shadow appears to peek out only from the bottom. This is a common trick for creating natural-looking floating cards where the side shadows would otherwise feel heavy.

Browser Support and Rendering Gotchas

Box-shadow has been supported without vendor prefixes in every major browser since around 2012. According to caniuse.com, global support sits above 98% as of 2026, including all modern Safari, Chrome, Firefox, Edge, and Samsung Internet versions. The spec is stable in CSS Backgrounds and Borders Level 3.

A few rendering quirks are worth knowing:

• Stacking order matters. Earlier layers in the comma-separated list paint on top of later layers. If you want a tight dark shadow over a soft ambient glow, put the tight one first.
• overflow: hidden clips box-shadow on descendants, not on the element itself. If a parent has overflow: hidden and a child has a box-shadow, the shadow will be cropped at the parent's box. This trips up many developers building cards inside containers.
• Border-radius is respected by box-shadow. A rounded element gets a rounded shadow automatically, which is why shadows and rounded corners pair so naturally.
• transform: scale() scales the shadow too. Scaling a card from 1 to 1.05 on hover grows the shadow proportionally, which is why some designers prefer to animate the shadow itself rather than the element scale.
• 3D transforms create their own stacking context, which can cause shadows on nearby elements to render behind instead of in front. Use z-index carefully when mixing transforms and shadows.

Shadows in Light vs Dark Mode

The same shadow values rarely work well in both themes. On a white background, a black shadow at 10-15% opacity looks natural. On a dark background, that same shadow is invisible because dark-on-dark has no contrast.

Design systems that support dark mode typically use one of three approaches:

Approach	Light Mode	Dark Mode
Stronger dark shadow	rgba(0,0,0,0.1)	rgba(0,0,0,0.5)
Coloured shadow	rgba(0,0,0,0.1)	rgba(0,0,0,0.6) with larger blur
Elevation via border	Shadow only	Subtle 1px top border at rgba(255,255,255,0.08) instead of shadow

Material Design 3 recommends the elevation-via-border approach in dark mode, since a stronger black shadow on an already-dark surface only adds contrast at the edges without a clear light source to justify it. Tailwind CSS ships separate shadow scales for light mode that most teams then adapt for dark themes using CSS variables.

Accessibility and Shadow Design

Shadows are decorative but they can still affect accessibility. The Web Content Accessibility Guidelines (WCAG 2.2) require interactive elements to have a visible focus indicator with at least 3:1 contrast against the surrounding background. A faint box-shadow focus ring like 0 0 0 2px rgba(0,0,0,0.1) often fails this check, especially on coloured buttons.

For accessible focus states, use a strongly contrasting shadow colour and enough spread to be clearly visible: 0 0 0 3px rgba(59, 130, 246, 0.6) on light backgrounds, or a brighter equivalent on dark. Shadows should never be the only indicator of state - always pair them with a colour change or outline for users who cannot perceive subtle depth cues. Users with reduced-motion preferences set via prefers-reduced-motion should not see shadow-based animations transition over more than 200ms, since the repaint cost on every frame can also cause visual discomfort.

Common Mistakes When Designing Shadows

• Using pure black at high opacity. A shadow of rgba(0,0,0,0.5) looks muddy and dated. Real shadows in natural light are never fully black and never that opaque. Stay between 5% and 25% opacity for most cases.
• Ignoring the direction of light. If one shadow in your UI points down-right, all shadows should point the same way. Mixed shadow directions look unintentional.
• Shadows on every element. Shadow is a signal of elevation. Putting shadows on everything flattens the meaning and the UI feels noisy.
• Very large blur with high opacity. A huge soft shadow at 40% opacity can hide behind surrounding content and make the whole layout feel foggy. Increase blur or opacity, rarely both at once.
• Shadow colour matching the element. A blue card with a blue shadow feels artificial. Use a neutral dark shadow even on strongly coloured surfaces, except for intentional glow effects.

Pair your shadows with rounded corners from the CSS Border Radius Generator for polished card designs. For frosted glass effects, try the CSS Glassmorphism Generator. Once the CSS is finalised, run it through the CSS Minifier to strip whitespace before shipping.

Everything runs locally in your browser. Your CSS is never sent to any server.

Sources

• MDN Web Docs - box-shadow
• W3C CSS Backgrounds and Borders Module Level 3 - box-shadow
• Can I Use - CSS box-shadow browser support
• Material Design 3 - Elevation
• Tailwind CSS - Box Shadow utilities
• MDN Web Docs - filter: drop-shadow()