CSS Box Shadow Generator Online
Create CSS box shadows with live preview. Multiple layers, inset, blur, and spread.
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.2);
Why use it
Perfect CSS shadows without guessing values
Instant preview
Adjust offset, blur, spread, and color with sliders. Results are immediate.
Multiple layers
Stack shadows for realistic effects. Add or remove layers easily.
Inset shadows
Toggle between outer and inner shadows with one click.
No installs
Everything in the browser. No external design tools required.
How it works
Three steps, no hassle
Configure your shadow
Adjust offset X, offset Y, blur radius, spread radius, and color using visual controls. Toggle 'inset' for inner shadows.
Add multiple shadows
The box-shadow property accepts multiple comma-separated shadows. Combine layers to create realistic elevation or depth effects.
Copy the CSS
The box-shadow code is generated in real time. Copy the complete property ready for your stylesheet.
FAQ
Got questions?
Yes. The box-shadow property accepts a comma-separated list: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). Shadows are rendered in order — the first in the list appears on top. This is essential for realistic multi-layer shadows, following the principle that natural shadows have an umbra component (dark and sharp) and a penumbra component (diffuse and wide).
The 'inset' keyword changes the shadow from outer to inner. Instead of projecting outward from the element, the shadow appears inside its borders, creating the illusion that the element is recessed or pressed. Used to simulate pressed buttons, active input fields, and inverted relief effects (as in neumorphism design).
Box-shadows are rendered during the browser's paint phase and can trigger expensive repaints when animated. Unlike transform and opacity (which operate in the compositor layer without repaint), animating box-shadow can cause frame drops. The Chrome team recommends using filter: drop-shadow() instead for elements needing animated shadows, or using pseudo-elements with animated opacity to simulate the effect with better performance.
text-shadow applies only to the rendered text, following each glyph's contours. box-shadow applies to the element's box model (border-box), completely ignoring the content. Applying box-shadow to a text span produces a rectangular shadow (or rounded if the element has border-radius). For a shadow that follows the exact shape of the content (including transparent text or images), use filter: drop-shadow().
Realistic shadows combine at least two layers: a high-opacity, small-blur shadow for the umbra, and a low-opacity, large-blur shadow for the penumbra. Google's Material Design elevation system defines 24 elevation levels, each with specific box-shadow values. For example, elevation 8 (floating cards) uses: box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12).
CSS box-shadow: rendering, neumorphism, and Material Design elevation
The box-shadow property was introduced in CSS3 (Backgrounds and Borders module, W3C) and achieved full unprefixed support in 2012. Before CSS3, developers simulated shadows with 9-slice PNG images (nine-patch), a bandwidth and maintenance-heavy technique. The box-shadow syntax defines, in order: offset-x, offset-y, blur-radius, spread-radius, and color, with the optional 'inset' keyword. The spread parameter is unique to box-shadow and has no equivalent in filter: drop-shadow() or text-shadow.
Shadow rendering in modern browsers uses compositor layers. When an element has box-shadow, the browser promotes it to its own paint layer to render the shadow independently. This has GPU memory implications: each additional layer consumes VRAM. On devices with limited VRAM (low-end mobile), excessive box-shadows can cause frame drops. The alternative filter: drop-shadow() uses the CSS filter pipeline, which in Chrome is processed by the GPU more efficiently, although its behavior differs on elements with border-radius.
Neumorphism, the UI design trend that went viral in December 2019 after a Dribbble post by Alexander Plyuto, relies exclusively on box-shadows to create the illusion of elements extruded from the background. The typical recipe combines two shadows: a light one (positive offset, as if light comes from the top-left) and a dark one (negative offset). Google's Material Design elevation system, documented at material.io, defines 24 elevation levels with mathematically calculated box-shadow values to consistently simulate ambient and direct light across the entire interface.