Build CSS box shadows visually with live preview and instant code output
/* Adjust the controls above to generate your CSS */
Everything a designer or developer needs to know - from syntax basics to advanced multi-layer techniques.
Every CSS box-shadow value follows a strict order of parameters. The example below breaks each part down clearly:
| Parameter | Example Value | What It Controls | Beginner Explanation |
|---|---|---|---|
| Inset (optional) | inset |
Shadow direction | When present, the shadow is drawn INSIDE the element instead of outside. Think of it like pressing a button into a surface rather than raising it above one. Omit this word for a normal outer shadow. |
| X-Offset | 0px |
Horizontal position of the shadow | Moves the shadow left or right. A positive value pushes the shadow to the right, a negative value pushes it to the left. Zero means the shadow is directly centered horizontally under the element. |
| Y-Offset | 5px |
Vertical position of the shadow | Moves the shadow up or down. A positive value pushes the shadow downward (simulating a light source from above), while a negative value pulls it upward. This is the most important value for conveying elevation. |
| Blur Radius | 10px |
How soft or sharp the shadow edges are | At 0px the shadow has a perfectly hard, crisp edge. As this value increases, the shadow feathers and softens outward, simulating indirect or diffused light. A high blur creates an "ambient" glow effect. |
| Spread Radius | 0px |
How large or small the shadow is overall | Positive spread expands the shadow in all four directions simultaneously, making it larger than the element. Negative spread shrinks it. Spread is often confused with blur - blur is about softness, spread is about physical size. |
| Color (RGBA) | rgba(0,0,0,0.5) |
The color and transparency of the shadow | RGBA stands for Red, Green, Blue, Alpha. The first three values (0-255) control the color. The Alpha Channel is the fourth value (0.0 to 1.0) and controls transparency - 0 is fully invisible, 1 is fully opaque. Using semi-transparent black (e.g. 0.15 to 0.4) creates realistic shadows that work on any background color. |
This is one of the most common points of confusion in CSS box shadows. Think of Blur Radius as the sharpness dial on a camera lens. A blur of 0 gives you a perfectly crisp, hard-edged shadow with no feathering at all. As you increase blur, the shadow's edges dissolve outward into the surrounding area - the shadow stays roughly the same size but becomes softer and more diffused, like light coming from a large, indirect source rather than a single sharp lamp.
Spread Radius, on the other hand, is purely about the physical footprint of the shadow. A positive spread of 10px means the shadow extends 10 pixels outward in every direction before the blur even starts. A negative spread shrinks the shadow so it is smaller than the element itself. You can use a large negative spread with a heavy blur to create a focused "pool of light" effect, or combine positive spread with zero blur for a hard offset silhouette effect.
Real-world objects never cast a single flat shadow. In physical space, light wraps around objects and scatters, creating at minimum two distinct shadow zones: a sharp, dark "contact shadow" directly beneath the object, and a larger, softer "ambient shadow" that feathers out into the surrounding environment. CSS allows you to simulate this by stacking multiple shadow layers on a single element using comma-separated values.
A classic technique used in Material Design is to combine one small, sharp, low-opacity shadow (representing direct light) with one large, soft, slightly more opaque shadow (representing ambient bounce light). The result is a shadow that feels genuinely three-dimensional rather than flat and digital. The presets in this tool demonstrate these combinations - use the "Material Design Card" preset to see a real-world example you can study and modify.
Neumorphism (sometimes called "soft UI") is a design trend that emerged around 2020 as a reaction to flat design. The core concept is that UI elements appear to be extruded from or pressed into the background surface itself, as if the entire interface were made of a single smooth, soft material like clay or foam. Elements look like they were molded rather than placed on top of a surface.
The signature CSS technique for Neumorphism uses two box shadows simultaneously: one shadow that is lighter than the background (using a semi-transparent white or very light version of the background color) positioned in the top-left direction, and one shadow that is darker (a semi-transparent dark color) positioned in the bottom-right direction. This creates the illusion of a directional light source carving depth into a uniform surface. The key constraint is that the element's background color must match the page background almost exactly. The "Neumorphic Button" preset in this generator demonstrates the exact technique. A critical caution: Neumorphic designs can have very low contrast and may fail WCAG accessibility standards, so always test with accessibility checkers before using in production.
Adding the inset keyword to any shadow layer reverses the direction of projection. Instead of the shadow being cast outward onto the surface behind the element, it is rendered inside the element's own boundaries, making the element appear as if it is recessed or pressed down into the page.
Inset shadows are extremely useful for UI state changes - a button that gains an inset shadow when clicked gives immediate tactile visual feedback that it has been "pressed." They are also used to create inner-glow effects for highlighted containers, to simulate the inside of a physical input field, or to add a realistic "trough" appearance to sliders and progress bars. You can combine inset and non-inset shadows on the same element to create a component that appears simultaneously raised at the edges and recessed in the center, a common technique in skeuomorphic design.
Shadow opacity is tightly connected to the perceived "elevation" of an element and the ambient lighting of your overall design. A general rule of thumb from Material Design guidelines: the higher an element sits in the visual hierarchy, the more elevated it appears, and elevation should be communicated with slightly stronger shadows. However, subtlety is almost always preferred.
For light-themed interfaces with a white or near-white background, shadow opacities in the range of 0.05 to 0.15 feel natural and unobtrusive. For elements that need to clearly stand above the page (modals, dropdowns, floating action buttons), opacities between 0.15 and 0.35 are typical. Values above 0.5 tend to look harsh and digital unless you are intentionally going for a strong, graphic aesthetic. Using the RGBA Alpha channel slider in each layer of this generator lets you dial in exactly the right subtlety. Remember: the perceived opacity also shifts depending on the background color - a shadow with alpha 0.15 on a pure white background will look much more visible than the same shadow on a medium gray background.
Before CSS box shadows became widely supported, web designers spent enormous amounts of time creating shadow effects using stacked background images and complex table layouts. The introduction of box-shadow as a native CSS property was genuinely transformative - it handed designers a direct, programmatic line to one of the most powerful visual communication tools in all of design. Shadows are not merely decorative. They are the primary language the human visual system uses to understand spatial relationships on a flat screen. When you give an element a shadow, you are telling the viewer's brain "this object floats above the surface."
The CSS box-shadow property supports an unlimited number of comma-separated layers. Each layer is composited on top of the last, closest to the element first. This means you can build extraordinarily complex shadow systems - and some production interfaces do use four, five, or even six layers on a single component to achieve photorealistic depth. Performance-wise, shadows rendered entirely by the browser's GPU compositor are surprisingly cheap, though extremely heavy blur values or shadows on elements that animate frequently can cause repaints. For animated elements, prefer filter: drop-shadow() instead, which follows irregular shapes like PNGs.
When designing a system of shadows rather than one-off effects, consistency is critical. Define your shadow scale early - perhaps three to five named levels (surface, raised, elevated, modal, tooltip) - and assign each a specific CSS variable containing the full multi-layer shadow value. This approach keeps your UI coherent, makes elevation immediately readable to users, and means you only ever have to update a shadow definition in one place when you refine your design system. This generator can help you prototype each level individually and then export the CSS to paste directly into your design system's token file or stylesheet.