CSS Box-Shadow Generator

About this tool

Multi-layer shadow stacks

Visual box-shadow generator with multi-layer support, X/Y/blur/spread/color/opacity controls, live preview, presets (Subtle, Card, Modal, Neon, Neumorphism), and copy-paste CSS output.

RT-DEV-085 · Developer Tools

Presets:

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.06);

How to use the Box Shadow Generator

Start with a preset or blank layer

Quick start: click any preset (Subtle, Card, Modal, Neon, Neumorphism). Or modify the default 2-layer Card shadow. Each layer has X/Y offset, blur radius, spread radius, color, opacity, and optional inset (inner shadow) toggle.

Stack multiple layers for realistic depth

Real-world shadows use 2-3 layers: one tight + dark close to the element, one softer + lighter further out. Material Design + Apple HIG both use multi-layer stacks. Add layers via "+ Add shadow layer"; each gets its own controls.

Use inset for inner shadows

Toggle "Inset" to make a shadow appear inside the element instead of outside. Useful for: pressed-button states, inset borders, neumorphic depth effects. Combine outer + inner shadows in the same stack for advanced effects.

Copy the CSS

Click "Copy CSS" to copy the full box-shadow: declaration. Paste into your stylesheet. Compatible with all modern browsers (IE9+). For maximum browser compatibility, the output uses RGBA colours which work everywhere.

CSS box-shadow — depth + hierarchy in a single property

CSS box-shadow is the single most-used property for creating visual depth in modern web design. Material Design (Google\'s design system) defines depth as a strict hierarchy: paper surfaces stack at distinct elevations, with each elevation given a specific shadow signature. Apple Human Interface Guidelines (HIG) follow similar principles. The CSS property syntax is simple — offset-x, offset-y, blur, spread, color, optional inset — but creating shadows that LOOK real (not flat, not over-the-top) requires layering. A single shadow rarely looks right; 2-3 stacked layers with varying opacity + blur produce the diffuse light-source effect that matches reality. This tool gives you the visual editor + presets you need without memorising syntax.

Anatomy of a realistic shadow

Real shadows in nature have multiple light sources + ambient bounce light. A single light source produces a hard-edge shadow with no depth gradient. Multiple sources blur the edges + add subtle layering. To replicate this in CSS, stack 2-3 layers: (1) Tight + dark: small offset, small blur, higher opacity (~10-15%); creates the "near contact" shadow. (2) Mid-range: larger offset (10-20px), moderate blur (20-40px), medium opacity (~5-8%); creates the main shadow. (3) Wide + soft: large offset (30-50px), large blur (60-100px), low opacity (~2-4%); creates the ambient diffuse halo. Material Design\'s elevation system formalises this with specific layer recipes at each elevation level (0dp, 2dp, 4dp, 8dp, 16dp, 24dp).

Single-layer shadows almost never look real. Material Design + Apple HIG both use 2-3 layer stacks. The eye reads multi-layer shadows as natural depth; single shadows feel flat or harsh.

The neumorphism + glassmorphism trends

Two recent design trends rely heavily on advanced box-shadow techniques. Neumorphism (2020 trend): creates "soft UI" that appears to be raised from or pressed into a background of identical color. Achieved by stacking a light shadow (-x, -y, soft, white-ish) with a dark shadow (+x, +y, soft, dark-ish). The "neumorphism" preset in this tool demonstrates the technique. Glassmorphism (2021 trend): combines backdrop-filter blur with subtle box-shadows + transparent backgrounds to create frosted-glass surfaces. Box-shadow contributes the depth; backdrop-filter contributes the blur. Both trends produce visually striking effects but should be used sparingly + with accessibility considerations (low contrast can hurt legibility).

The ASEAN web design context

Web design across ASEAN markets has matured rapidly with widespread adoption of Material Design, Tailwind CSS, and design-system thinking. Singapore + Hong Kong digital agencies often lead in design polish; Vietnam + Indonesia have produced some of the most innovative + experimental design work in recent years (e.g., Tokopedia\'s playful Material variations, Grab\'s consolidated multi-brand system). Practical considerations: (1) Performance: complex shadows are GPU-accelerated but still cost. On older devices common in ASEAN (mid-range Android), keep total shadow layers under 4 per element for smooth scrolling. (2) Print + screen-reader compatibility: shadows don\'t print + screen readers ignore them — never rely solely on shadows for hierarchy. (3) Dark mode: shadows on dark backgrounds need much higher opacity (often 30-50%) than on light. Plan separate dark-mode shadow values.

10 Things to Know About CSS Box Shadow

Syntax: box-shadow: x y blur spread color [inset];. Multi-layer: separate by commas.

Realistic shadows use 2-3 layers: tight+dark close, mid-range main, wide+soft halo.

Material Design elevation formalises shadow recipes for each elevation level (2dp, 4dp, 8dp, 16dp, 24dp).

Inset shadows appear inside the element. Useful for pressed-button states + neumorphism.

RGBA colours let you control shadow opacity precisely. 5-15% opacity for subtle; 25%+ for dramatic.

Spread grows/shrinks the shadow size beyond blur. Positive = grows; negative = shrinks (useful for tight stacks).

Box-shadow is GPU-accelerated in modern browsers — performant for animations + scrolling.

Dark mode shadows need higher opacity (30-50%) than light mode (5-15%) to be visible.

Neumorphism (2020 trend) uses paired light + dark shadows for "soft UI" depth effects.

Shadows don\'t print + are ignored by screen readers — never use as sole hierarchy signal.

Frequently Asked Questions

Real-world shadows have continuous gradients from dark-tight to soft-diffuse. A single CSS shadow produces a uniform blur — looks like a stuck-on overlay rather than natural light. Stacking 2-3 layers with varying offsets, blurs, and opacities reproduces the continuous gradient. Material Design + Apple HIG both formalise this in their elevation systems. Start with the "Card" preset and observe the difference vs "Subtle" (single layer).
For depth effects INSIDE an element. Common uses: (1) Pressed button states: inset shadow makes button look "pushed in" on :active. (2) Neumorphism pressed/raised effects: inset = pressed-in; offset outer shadow = raised. (3) Inset borders + glow: e.g., inset focus rings, embossed text effect. (4) Faux inner padding: inset shadow with light color creates a "frame" effect. Combine outer + inner shadows in the same stack for advanced multi-state designs.
Blur: how soft/diffuse the shadow edge is. 0 = hard edge; 10+ = soft fade. Spread: how much larger/smaller the shadow is than the element. Positive = grows beyond element; negative = shrinks inside element edges. Common usage: blur 4-20px for typical shadows; spread −2 to 0 for tight stacks; spread positive for "glow" effects. Negative spread is useful when stacking shadows: prevents the inner shadow from extending beyond the outer one.
No. Box-shadow is rendered outside the element\'s box but doesn\'t add to layout dimensions. Adjacent elements + parents don\'t reflow to accommodate. Implication: shadows can overlap neighbouring elements — sometimes desired (cards floating over content) sometimes problematic (overlap with adjacent cards). Adjust margins to compensate when needed.
Browser supports unlimited; performance limits practical use. Modern desktop browsers handle 10+ layers per element easily. Mobile/older devices: keep under 4 layers per element for smooth scrolling animations. Most designs only need 2-3 layers — beyond that, marginal visual improvement is small. Don\'t stack 10 layers to mimic a single drop shadow; one well-tuned shadow with proper blur + opacity is usually enough.
box-shadow: applies to the element\'s rectangular/rounded-rectangular box. Best for cards, buttons, modals. filter: drop-shadow(): applies to the rendered visible shape, including transparent PNG edges, SVG outlines, text. Best for icons, logos, irregular shapes. Performance: box-shadow is more performant; drop-shadow forces a render pass on the element. Tip: use box-shadow by default; switch to drop-shadow only when the element has transparent regions you want to shape the shadow around.
Neumorphism = "new skeuomorphism" — soft UI that appears extruded from a background of identical colour. Achieved with paired light + dark shadows. Pros: visually distinctive, modern-looking, subtle depth. Cons: poor contrast hurts accessibility (WCAG often fails); requires homogeneous background colours; doesn\'t work well for buttons (low affordance — users don\'t know they\'re clickable). Verdict: use sparingly for non-interactive surfaces (cards, panels); avoid for primary CTAs + critical interactions. Many designs that started fully neumorphic have reverted to traditional shadows for accessibility reasons.
Black/dark shadows on dark backgrounds are nearly invisible — defeats the purpose. Three options: (1) Higher opacity dark shadows (30-50% vs 5-15% in light mode) — still works on dark bg. (2) White/light shadows with lower opacity (5-10%) — creates a glow effect from above. (3) Border + shadow combination — border for visible edge, shadow for depth cue. Most design systems define separate shadow tokens per mode; use CSS variables with prefers-color-scheme: light/dark to switch.
Layer configurations save to your browser\'s localStorage so they persist between sessions on the same device. Nothing leaves your browser — open DevTools → Network and confirm zero outbound requests. Safe for confidential design work.
Pair with: CSS Gradient Generator (RT-DEV-086) for background gradients; CSS Clip-Path Generator (RT-DEV-087) for shape clipping; Type Scale Calculator (RT-DEV-080) for typography. External: Material Design 3 + Apple HIG for elevation reference; Tailwind shadow utility classes (built-in 2-3 layer stacks); cssbuttons.io + neumorphism.io for inspiration; Get Waves + CSS Generator suite for non-shadow specifics.

CSS Box-Shadow Generator