CSS Box-Shadow Generator

Create single and multiple CSS box shadows visually with live preview.

px
px
px 
{{ cssOutput }}

What Is CSS box-shadow?

The CSS property box-shadow adds one or more shadows to an element. Shadows create depth and make elements like cards, buttons and dialogs stand out from the background. You can control offset, blur radius, spread radius, color and the inset mode.

The box-shadow Syntax

The syntax is: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;. Offset-X and Offset-Y determine the shadow position. Blur radius controls the softness, spread radius enlarges or shrinks the shadow. The inset keyword creates an inner shadow. Multiple shadows are separated by commas.

Tips for Great Shadows

  • Use multiple shadows with different blur values for more realistic results.
  • Keep shadow colors subtle — use transparent black tones instead of hard colors.
  • Inset shadows work great for pressed buttons and input fields.
  • Test shadows in both light and dark mode, as they can appear differently.

box-shadow: syntax and behavior in detail

The box-shadow property is specified in CSS Backgrounds and Borders Module Level 3. The full syntax is box-shadow: [inset?] <offset-x> <offset-y> [<blur-radius>] [<spread-radius>] <color>. Offset-X moves the shadow horizontally (positive = right), offset-Y vertically (positive = down). The blur radius is the standard deviation of the Gaussian blur; larger means softer and more spread. The spread radius enlarges (positive) or shrinks (negative) the whole shadow uniformly — unlike blur, the edge stays hard.

The keyword inset flips the shadow inward — it appears inside the box, as if the surface were pressed in. Insets work well for inputs, pressed buttons, or recessed cards. Multiple shadows can be stacked comma-separated: box-shadow: 0 1px 2px #0001, 0 4px 8px #0001, 0 16px 32px #0001;. The browser paints back to front (last value bottom, first on top) — for believable elevation, layer three to four shadows with different blur values.

box-shadow automatically respects border-radius — a rounded box casts an appropriately rounded shadow. Important: the shadow does not enlarge the hit area and takes no layout space, which makes it predictable in grid and flex containers. Compared to filter: drop-shadow(), box-shadow is rectangular (follows the box outline), while drop-shadow is alpha-based and shadows transparent PNGs cleanly — but is more GPU-intensive. For simple UI cards, box-shadow is almost always the right choice.

How to use the generator efficiently

With a few steps you get shadows that support your hierarchy instead of breaking it.

  1. Start with a preset that fits your style: Subtle for banking/enterprise, Material for classic apps, Layered for modern SaaS surfaces.
  2. Reduce blur and spread until the shadow feels soft but defined. Rule of thumb: blur is 2–4x offset-Y; spread usually stays at 0 or a slightly negative value (–1 to –2 px) for realistic depth.
  3. Stack shadows with Add Shadow to simulate elevation believably. A sharp contact shadow (small, low blur) plus a soft ambient shadow (large, high blur) is the standard for cards.
  4. Pick the shadow color with alpha via 8-digit hex (e.g. #00000033 = 20%). Pure black feels heavy; brand color + low alpha (e.g. #0d948833) feels more elegant.
  5. Copy the CSS and replace numeric values with custom properties like var(--shadow-elevation-2), so your design system manages the elevation scale centrally.

Concrete box-shadow examples

These snippets are battle-tested and cover the most important elevation levels.

  • Card shadow subtle: box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); — Tailwind's shadow-sm.
  • Material elevation 4: box-shadow: 0 2px 4px -1px #0003, 0 4px 6px #00000024, 0 1px 10px #0000001f;.
  • Modal overlay: box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); — fits floating dialogs in modern UIs.
  • Inset for input: box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); — light pressed effect, great for search bars.
  • Hover lift: box-shadow: 0 10px 25px -5px rgba(13,148,136,0.25); combined with transform: translateY(-2px); for interactive feedback.

Performance costs and limits

box-shadow with blur is GPU-accelerated but not free: every blurred pixel must be computed as a Gaussian convolution over roughly 2 * blur pixels. At blur 64 px on a 1920x1080 display that means several hundred MB of memory bandwidth per frame. On older mobiles and iOS Safari this causes frame drops, especially when the shadow is animated. Tips: avoid animated box-shadow on slow devices — animate transform and opacity instead, which run on the compositor layer. If a shadow is static, its cost is minimal. On transparent backgrounds or wallpaper, a dark shadow can become invisible — test with dark mode and varied surface tones. Finally: shadows are purely decorative; WCAG does not mandate them, but they must not impair text legibility on the card — spread values above 10 px in brand color can reduce contrast at the card edge.

Frequently asked box-shadow questions

What is the difference between box-shadow and filter: drop-shadow()?
box-shadow follows the rectangular box outline (including border-radius); drop-shadow follows the element's alpha channel (even transparent PNGs). drop-shadow is more GPU-intensive, so prefer box-shadow for standard cards.
Why don't I see the shadow in iOS Safari?
iOS Safari sometimes doesn't render very large blur values in position: fixed containers correctly. Reduce blur below 50 px or use a non-fixed container for the shadow.
How do I animate box-shadow without performance issues?
Instead of animating box-shadow directly, place a pseudo-element ::after with the prepared shadow and animate its opacity. The expensive Gaussian convolution stays static and only the GPU-cheap opacity changes.
Which color should I use for realistic shadows?
Pure black looks graphic and heavy. Realistic is a slightly desaturated dark blue or your brand's darkest tone, always with alpha (10–25%). Example: rgba(15, 23, 42, 0.15) instead of rgba(0,0,0,0.15).
Does box-shadow work in dark mode?
Yes, but dark shadows on dark backgrounds are barely visible. In dark mode many design systems use surface overlays or a subtle glow (box-shadow: 0 0 20px rgba(255,255,255,0.05)) to signal depth instead.
How many shadows should be stacked?
Two to three shadows are enough for realistic depth: a sharp contact shadow (low blur, small offset), a mid-elevation shadow, and a soft ambient shadow. More layers cost GPU without visible benefit.

Related tools