Using the Box Shadow Generator
This interactive tool helps you create and fine-tune multiple box-shadow layers. The visual feedback allows for rapid experimentation to achieve the perfect depth or glow effect for your elements.
- Manage Layers. Use the "Add Shadow Layer" button to add new shadows. Each shadow in the list can be selected by clicking on it. The selected layer is highlighted and its properties will appear in the editor below.
- Adjust Properties. With a layer selected, use the sliders for offsets, blur, and spread to modify it. You can also change its color and opacity, or make it an inner shadow by checking the "Inset" box.
- Preview. The preview pane on the right shows the result on a sample element. You can change the box and background colors to test how your shadow appears against different visual contexts.
- Copy Code. Once you are satisfied, click the "Copy" button to get the complete, clean CSS rule.
Understanding the box-shadow Property
The box-shadow property attaches one or more shadows to an element's frame. It is a highly versatile property for creating depth and other visual effects.
Syntax
box-shadow: [inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];Property Values
The values that make up a single box shadow are explained below.
| Value | Description | Example |
|---|---|---|
inset (optional) |
If present, this keyword changes the shadow from an outer (drop) shadow to an inner shadow. | inset |
offset-x |
The horizontal offset of the shadow. A positive value moves it to the right, a negative value to the left. | 10px |
offset-y |
The vertical offset of the shadow. A positive value moves it down, a negative value up. | 5px |
blur-radius (optional) |
The blur radius. A larger value creates a bigger, more diffuse blur. Negative values are not allowed. | 15px |
spread-radius (optional) |
The spread radius. A positive value expands the shadow, making it larger. A negative value shrinks it. | -2px |
color (optional) |
The color of the shadow. If omitted, the browser will use the element's color property. |
rgba(0, 0, 0, 0.5) |
Stacking Multiple Shadows
One of the best features of box-shadow is its ability to accept multiple, comma-separated shadow values. This allows you to stack shadows to create more realistic and complex depth effects.
box-shadow: 0 1px 1px rgba(0,0,0,0.12),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.12);The shadows are rendered in order from front to back. In the example above, the first shadow (0 1px 1px...) is drawn on top of the second, which is drawn on top of the third. This is why smaller, sharper shadows are often listed first to create a crisp edge, followed by larger, more blurred shadows to create a soft ambient glow.
Creative Use Cases
- Neumorphism. This design trend relies heavily on multiple, subtle
box-shadowlayers. Typically it uses one light inner shadow, one dark inner shadow, one light drop shadow, and one dark drop shadow to create a soft, extruded UI effect. - Glow Effects. To make an element glow, use a shadow with zero offsets and a large blur radius. You can stack multiple glows of slightly different colors and spreads for a more vibrant effect.
- Multi-line Borders. By setting the blur radius to zero and using different spread radius values, you can create interesting layered border effects without using the actual
borderproperty.
Performance Note
While powerful, box-shadow can be expensive for a browser to render. Applying many complex shadows with large blur radii to an element can negatively impact scrolling and animation performance. It is always a good practice to use shadows thoughtfully and test the performance of your page, especially on less powerful devices.