Generated CSS
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.2);
CSS Box Shadow Generator — Visual Editor, Multiple Shadows, Inset, Material Elevation
The box-shadow generator above produces the CSS box-shadow value with live preview. The property is defined in the W3C CSS Backgrounds and Borders Module Level 3 (Candidate Recommendation Draft, 11 March 2024 latest revision). Each shadow takes up to six components: horizontal offset, vertical offset, blur radius, spread radius, color, and the optional inset keyword. Multiple shadows are comma-separated and stack front-to-back, with the first declaration painted on top. The inset keyword changes the drop shadow from an outer shadow (drawn outside the border-box) to an inner shadow (drawn inside the padding-box) per the CSS Backgrounds 3 spec. Box-shadow is a CPU-rendered effect, not GPU-accelerated like transform or opacity. Each shadow triggers a multi-pass paint operation involving spline rasterization in Skia (Chromium / Blink) or equivalent graphics libraries in Firefox and Safari. For animations, prefer transform: translateY() with opacity over animating box-shadow directly — the latter forces per-frame repaints on the CPU. For a single static elevation the cost is negligible; for fifty animated cards on screen, it dominates frame time.
About this tool
Use the controls to dial in offsets, blur, spread, color, opacity, and inset. The "+ Add shadow" button stacks multiple shadow declarations onto the same element — useful for layered effects (e.g., a tight inner shadow plus a soft outer glow). The output includes the -webkit-box-shadow vendor prefix for Safari < 5.1 and older mobile browsers, though all current browsers (Chrome, Firefox, Safari, Edge, Opera) support unprefixed box-shadow per the W3C CR. For design-system context, Material Design 3 defines six elevation levels (Level 0 through Level 5), each tied to a functional role (cards at Level 1, floating action buttons or dialogs at Level 3; Levels 4–5 are reserved for hover and dragged states). M3 combines a tonal color overlay with a shadow — a change from M1 (2014) which used shadows alone on a 0–24 dp scale. The M3 token specification (m3.material.io/styles/elevation/tokens) provides the exact dp values and shadow tokens per level. Popular CSS frameworks (Tailwind, Bootstrap, Chakra) ship pre-set shadow scales that approximate the same hierarchy. Two non-obvious considerations matter. First, accessibility: WCAG 2.2 Success Criterion 1.4.11 (Non-text Contrast) requires UI components to have a 3:1 contrast ratio against adjacent colors, including their visual boundaries. A subtle shadow at 0 4px 6px rgba(0,0,0,0.06) that distinguishes a card from a white background fails 1.4.11 unless reinforced by a 1px border or stronger surface tone. Second, performance: animating box-shadow on hover is fine for a few elements but pathological for grids — a workaround is to animate the opacity of a pseudo-element with a static shadow instead (the "two-shadow trick").
- Live visual preview as you adjust controls
- Horizontal and vertical offset controls (positive = right/down per CSS Backgrounds 3)
- Blur and spread radius sliders (negative blur is invalid per the spec)
- Color picker with opacity / alpha control
- Inset shadow toggle (outer ↔ inner, per CR §7 wording)
- Multiple-shadow stacking for layered effects (front-to-back)
- Includes -webkit-box-shadow vendor prefix for legacy Safari / mobile
- One-click copy of generated CSS to clipboard
- Pure client-side — no API call, no upload
- Useful for design-system shadow tokens, hover states, depth/elevation hierarchy
Free. No signup. Your inputs stay in your browser. Ads via Google AdSense (consent required).
Frequently asked questions
Why does my shadow look pixelated on Retina displays?
Blur radius is specified in CSS pixels, not device pixels. On a 2× retina display a 4px blur is rasterized at 8 device pixels, which can show banding if the underlying surface uses a low-bit-depth buffer. Modern browsers default to sRGB / 8-bit per channel; for smoother gradients in the shadow, switch the rendering surface to a wider-gamut canvas or use filter: drop-shadow which composites differently. For most UI work the default is fine. Source: CSS Backgrounds and Borders Module Level 3 §7 plus Skia rendering documentation.
What's the difference between box-shadow and filter: drop-shadow?
box-shadow follows the element's CSS box (the rectangular outer edge), so a transparent PNG inside a div produces a rectangular shadow around the div, not the visible image. filter: drop-shadow respects the alpha channel of the element's contents, so the same PNG produces a shadow shaped like the visible pixels. Performance: box-shadow is CPU-painted in a multi-pass operation through Skia; drop-shadow is composited differently and can use GPU acceleration on capable browsers. Use drop-shadow for icons and PNG masks; use box-shadow for cards and rectangular elevation.
Why is animating box-shadow slow but animating transform fast?
transform and opacity are composited on the GPU as part of the layer compositor pass, so the browser interpolates them per-frame without re-painting any pixels. box-shadow is part of the paint phase: every frame of the animation re-rasterizes the shadow pixels in CPU through Skia (Blink) or equivalent libraries in Firefox and Safari. The standard workaround is the 'two-shadow trick': render two stacked elements (or pseudo-elements) with different static shadows, then animate the opacity of the top one. Source: McAnlis (2013) 'CSS paint times and page render weight' on web.dev.
Why does -webkit-box-shadow exist and do I need it?
Pre-2012 versions of Safari (mobile and desktop) shipped box-shadow under the experimental -webkit- prefix. After Safari 5.1 (July 2011) the unprefixed property has been the default. Adding -webkit-box-shadow today has near-zero cost and marginal compatibility benefit for the long tail of Android browsers locked to old WebKit forks (some carriers, kiosks, in-app webviews). Most modern style guides drop it. The generator emits both for paste-and-go safety with legacy targets.
How does Material Design's elevation map to box-shadow values?
Material Design 3 (m3.material.io) defines six elevation levels (Level 0 through Level 5), each tied to a functional role: Level 0 is flat (no shadow), Level 1 is a card resting on a surface, Level 3 is a floating action button or dialog, and Levels 4–5 are reserved for hover and dragged states. M3 layers a tonal color overlay on top of the shadow, so a Level 1 surface in dark theme also receives a slightly lighter tonal tint. The exact dp values and shadow tokens per level are specified in the M3 token reference. M1 (2014) used a different 0–24 dp scale with shadows alone.
Sources (5)
- Bos, B., Çelik, T., Daggett, J., Dürst, M., Hyatt, D., Lilley, C., & Sapin, F. (2024). CSS Backgrounds and Borders Module Level 3. W3C Candidate Recommendation Draft, 11 March 2024.
- CSS Working Group (2025). CSS Borders and Box Decorations Module Level 4. W3C Working Draft, first published 22 July 2025 (next-generation revision of CSS Backgrounds 3).
- Google / Material Design (2024). Material Design 3 — Elevation Tokens (six levels, Level 0 through Level 5; tonal color overlays combined with shadows). m3.material.io/styles/elevation/tokens.
- McAnlis, C. (2013). CSS paint times and page render weight. web.dev / Google Chrome Developers (12 April 2013) — Skia rasterization, multi-pass shadow painting, GPU vs CPU compositing.
- W3C Web Accessibility Initiative (2023). Web Content Accessibility Guidelines (WCAG) 2.2 — Success Criterion 1.4.11 Non-text Contrast (3:1 ratio for UI components and graphical objects). W3C Recommendation, 5 October 2023.
These are the original publications the formulas in this tool are based on. Locate them by journal name and year on Google Scholar or PubMed.
By Marco B. ·