CSS Shadow Preview
Preview and copy layered text and box shadows with live preview.
About the CSS Shadow Preview
The CSS Box Shadow Preview tool builds box-shadow declarations interactively. Adjust the offset, blur, spread, color, opacity, inset, and background, and the tool returns the exact CSS to paste into your stylesheet plus a live preview of the shadow.
The CSS box-shadow property is defined in the W3C CSS Backgrounds and Borders Module Level 3 (2014). It takes up to six values: horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. The blur and spread values are optional, and a single element can have multiple shadows separated by commas — the most common multi-shadow pattern is a Material Design elevation: a soft ambient shadow plus a sharper directional shadow.
Designers reach for shadows to convey elevation, focus, and depth. Google’s Material Design 3 specification defines elevation levels 0 (flat) through 5 (dialog) using carefully tuned shadow pairs. The Tailwind CSS framework ships default shadows shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, and shadow-2xl, each a specific combination of offset, blur, and opacity. This tool lets you replicate those exactly and save the CSS for your own design system.
One commonly missed detail: the shadow color should almost always be a translucent black or the brand color at low opacity, not a solid color. A solid-color shadow looks harsh and dated; a 15-25% opacity black shadow reads as soft and modern. The default opacity of 25% matches Tailwind’s shadow-md.
How It Works
The CSS box-shadow syntax is: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;. The inset keyword, if present, must come first. The blur and spread are optional; if omitted, blur defaults to 0 and spread defaults to 0.
Offset-x and offset-y are signed integers in pixels (or any CSS length unit). Positive X moves the shadow right; positive Y moves it down. A negative Y produces a shadow above the element, useful for ‘floating’ effects.
Blur radius is a non-negative length that controls how soft the shadow edge is. The browser applies a Gaussian blur approximation; the spec does not specify the exact algorithm, so the same blur value can look slightly different across Chrome, Firefox, and Safari. A blur of 0 produces a hard-edged shadow that matches the element’s shape exactly.
Spread radius grows or shrinks the shadow uniformly. Positive spread makes the shadow larger than the element; negative spread makes it smaller. A common trick is to use negative spread to produce a thin ring shadow without changing the apparent element size.
The color is converted to RGBA so the opacity slider can modulate the alpha channel. RGBA is the most reliable cross-browser format — 8-digit hex (#RRGGBBAA) is also supported in modern browsers, but RGBA has been supported since Internet Explorer 9.
Worked Examples
Default values (X=0, Y=8, blur=16, spread=0, color=#000000, opacity=25%, no inset) produce box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.25); — a soft drop shadow similar to Tailwind’s shadow-md. Suitable for cards and modals.
Material Design elevation 1 (a resting card): box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.20), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 2px 1px -1px 0px rgba(0,0,0,0.12);. The three-shadow stack gives a tight ambient plus directional shadow.
A focused input ring: box-shadow: 0px 0px 0px 3px rgba(51,102,204,0.40); — zero offset, zero blur, positive spread, low-opacity brand color. This produces a focus ring without shifting the element’s apparent position.
An inset shadow for a pressed button: box-shadow: inset 0px 2px 4px 0px rgba(0,0,0,0.30); — inset keyword, positive Y so the shadow appears at the top of the button (as if light comes from below).
When to Use This Tool
- Generating a Material Design elevation shadow stack for cards, dialogs, and floating buttons.
- Tuning a focus ring for an input that meets WCAG 2.4.11 Focus Appearance (Minimum) without affecting layout.
- Building a pressed-state inset shadow for buttons that respond to
:active. - Producing a glow effect for hover states using a colored shadow with low opacity.
- Replicating Tailwind’s default shadow scale for a custom design system.
- Previewing how a shadow looks on dark backgrounds (switch the preview background to a dark color).
- Drafting elevation tokens for a design system, where each elevation level corresponds to a specific shadow declaration.
Limitations & Disclaimer
The tool generates a single-shadow CSS declaration. For multi-shadow stacks (like Material Design elevation), copy the generated CSS and add comma-separated additional shadows manually. The blur algorithm differs slightly across browsers (Chrome, Firefox, Safari each use a different Gaussian approximation); test critical shadows cross-browser. Animated box-shadow changes can cause repaints and frame drops; for animated elevation, animate transform instead. The preview uses a white 120x80 box; the shadow will look slightly different on differently-shaped elements. See our disclaimer for full terms.
Frequently Asked Questions
Why does my shadow look different in Safari?
Each browser implements its own Gaussian blur approximation for <code>box-shadow</code> blur radius; the spec does not mandate a specific algorithm. Chrome and Firefox use similar approximations; Safari’s WebKit implementation can produce a slightly softer or harder edge at the same blur value. Test critical shadows across browsers before shipping.
How do I make multiple shadows?
Separate each shadow declaration with a comma. For example: <code>box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.1);</code> applies two shadows. The first shadow renders on top. This tool generates a single shadow; for multi-shadow stacks, copy the generated CSS and add comma-separated additional shadows manually.
Should I use box-shadow or filter: drop-shadow?
<code>box-shadow</code> follows the element’s border-box, so it produces rectangular shadows even for clipped or transparent elements. <code>filter: drop-shadow()</code> follows the element’s actual alpha shape, so it produces shaped shadows for PNG/SVG images with transparency. Use <code>drop-shadow</code> for irregular shapes and <code>box-shadow</code> for rectangular elements.
What is the difference between inset and normal shadow?
A normal shadow is drawn outside the element, as if the element is floating above the page. An inset shadow is drawn inside the element, as if the element is pressed into the page. Inset shadows are commonly used for pressed buttons, depressed inputs, and inset divider lines.
Does the spread radius affect performance?
Spread radius does not significantly affect performance on modern hardware. Large blur radii on animated elements can cause repaints that drop frame rate; for animated shadows, use a CSS transform instead of changing shadow values, and limit blur radius to 20px or less.
How do I make a shadow that respects dark mode?
Shadow color should be darker in dark mode — use a translucent black with higher opacity (40-50%) on dark backgrounds, since dark backgrounds already absorb light. Pure black shadows disappear on dark backgrounds; a dark blue or dark purple shadow at 40-60% opacity reads better.
Last updated: September 9, 2026 · Author: HT99 Tools Editorial Team