CSS Box Shadow Generator
Create layered box shadows with live preview and copyable CSS code.
About the CSS Box Shadow Generator
The CSS Box Shadow Generator builds box-shadow declarations with live preview. Box shadows add depth to cards, buttons, dropdowns, and modals without bitmap image assets — the browser renders the shadow at runtime, so it scales with the element and inherits CSS transitions automatically.
The box-shadow property takes up to six values: horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. Multiple shadows can be layered with comma separation to create complex depth effects — a common Material Design pattern layers a soft ambient shadow with a sharper directional shadow to mimic real-world lighting.
This tool exposes every parameter as a live slider so you can iterate visually. The preview pane updates instantly, and the CSS output is ready to paste into any stylesheet, inline style, or Tailwind arbitrary-value block like shadow-[0_4px_12px_rgba(0,0,0,0.15)].
How It Works
The box-shadow syntax is box-shadow: h-offset v-offset blur spread color [inset] per W3C CSS Backgrounds and Borders Module Level 3 §7.1. Offsets move the shadow: positive horizontal moves right, negative left; positive vertical moves down, negative up. A zero-offset shadow with blur renders as a glow around the entire element.
Blur radius controls the softness of the shadow edge. A blur of 0 produces a hard-edged copy of the element; a blur of 20px produces a soft diffuse shadow. Spread radius expands or contracts the shadow shape: positive spread grows the shadow outward (useful for solid color overlays), negative spread shrinks it inward (useful for tight glow effects).
Color accepts any CSS color format. For shadows, rgba() with alpha is preferred over solid hex because real-world shadows are translucent — an opaque black shadow looks harsh and unnatural. The tool converts your hex color to rgba() with a separate opacity slider so you can fine-tune the shadow strength without changing the base color.
The inset keyword reverses the shadow direction, rendering it inside the element. Inset shadows are used for pressed-button states, depressed input fields, and inner glow effects. Multiple shadows can be comma-separated: box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1) layers a soft ambient with a sharp directional shadow.
Worked Examples
A Material Design elevation-1 shadow: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08). Two shadows layered — a soft ambient plus a sharp directional — mimic real-world penumbra. Use for cards in a hovered or focused state.
A floating-action-button elevation-8 shadow: box-shadow: 0 8px 24px rgba(0,0,0,0.25). Larger offset and blur for elements that appear to hover above the page. Pair with a CSS transition: box-shadow 200ms for a smooth elevation change on hover.
An inset glow effect: box-shadow: inset 0 0 12px rgba(10,79,58,0.4). Zero offset with inset creates an inner glow, useful for pressed buttons or focused input fields. Adjust the alpha to control the glow intensity without changing the color.
When to Use This Tool
- Material Design elevation levels (1, 2, 4, 8, 16) for cards, dialogs, and floating buttons.
- iOS-style depth on macOS Big Sur-style rounded panels with soft ambient shadows.
- Pressed-button states using
insetshadow on:active. - Focused input field glow using inset shadow with the brand color.
- Modal dialog overlays with a large blur radius to feel like they float above the page.
- Tooltip depth with a small offset and low blur for a subtle lifted effect.
- Neumorphic UI designs using layered inset shadows (light from top-left, dark from bottom-right).
Limitations & Disclaimer
This tool generates W3C CSS Backgrounds and Borders Module Level 3 box-shadow declarations. It supports single-shadow output; for multi-shadow layering, edit the CSS and comma-separate the values. Box shadows trigger CPU-bound repaints and can cause jank on low-end devices during animation — for animated shadows prefer filter: drop-shadow() or animate transform instead. Shadows are clipped by parent overflow: hidden containers, which is a CSS limitation, not a tool limitation. The preview pane uses a light background; dark-mode previews require manual CSS adjustments. See our disclaimer for full terms.
Frequently Asked Questions
What is the difference between blur and spread radius?
Blur softens the shadow edge by applying a Gaussian blur — a blur of 12px creates a soft diffuse shadow. Spread grows or shrinks the shadow shape without changing softness — positive spread makes the shadow larger than the element, negative spread makes it smaller. Spread is useful for solid color overlays or tight glow effects.
Should I use rgba or hex for shadow color?
Always <code>rgba()</code> with alpha for shadows. Real-world shadows are translucent, and an opaque black shadow looks harsh and unnatural. Set the color to a slightly tinted version of your page background (e.g. <code>rgba(10,79,58,0.15)</code> on a cream background) to create a cohesive shadow palette rather than pure black.
Why does my box-shadow not show?
Common causes: the element has <code>overflow: hidden</code> clipping the shadow, the parent has <code>overflow: hidden</code> clipping child shadows, the shadow color matches the background, or the element has <code>display: inline</code> (shadows only render on <code>inline-block</code>, <code>block</code>, or <code>flex</code>). Also check <code>z-index</code> — a higher-stacked sibling may cover the shadow.
Can I animate box-shadow?
Yes, but it triggers a repaint on every frame and can cause jank on low-end devices. For performant animations, transition the <code>box-shadow</code> property with a short duration (200ms) and few shadows. For complex layered animations, consider the <code>filter: drop-shadow()</code> alternative which composites on the GPU, or animate <code>transform</code> instead.
How do I create multiple layered shadows?
Comma-separate them: <code>box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1)</code>. The first shadow renders on top. A common pattern is two shadows: a soft ambient (large blur, low alpha) plus a sharp directional (small blur, higher alpha) to mimic real-world penumbra. Material Design uses this layering throughout.
What is the difference between box-shadow and filter: drop-shadow?
<code>box-shadow</code> renders a rectangular shadow behind the element regardless of its shape. <code>filter: drop-shadow()</code> follows the alpha channel of the element — useful for shadowing PNG icons with transparent backgrounds. <code>drop-shadow</code> also composites on the GPU and is faster for animated shadows, but it does not support spread radius.
Last updated: September 9, 2026 · Author: HT99 Tools Editorial Team