CSS Box Shadow Generator

Build single and multi-layer box shadows visually. Adjust offsets, blur, spread, color, and opacity - then copy the CSS.

Last reviewed: April 2026
Reviewed by , software engineer · last updated April 2026

New to this tool? Click here for instructions

Shadow Layers
Layer 1
Generated CSS
Adjust the sliders to design your box shadow.

How to Use the Box Shadow Generator

The CSS Box Shadow Generator is a free online tool that allows you to create and customize box-shadow effects visually. Here's how to use it:

1. Choose a Mode: Select whether you want to create an outer shadow, an inset shadow, layered shadows, or use a preset.

2. Adjust Sliders: Use the sliders to adjust the offset, blur, spread, color, and opacity of the shadow. The Offset X and Y sliders control the shadow's position, while the Blur and Spread sliders control its sharpness and size. The color picker allows you to choose the shadow's color, and the opacity slider makes it transparent.

3. Add Layers: In Layered mode, you can add multiple shadow layers to create complex effects. Each layer can be customized independently.

4. Copy or Download: Once you are satisfied with your shadow, you can copy the generated CSS code or download it for use in your stylesheet.

When to Use the Tool in Real Workflows

The CSS Box Shadow Generator is ideal for designers and developers who need to quickly create visually appealing shadows for their web projects. It is particularly useful when you want to enhance the visual depth and realism of your designs without having to manually write complex CSS code.

How It Works

The tool works by allowing you to interactively adjust the parameters of a box-shadow effect. When you make changes, the tool automatically updates the CSS code to reflect your adjustments. This makes it easy to experiment with different shadow effects until you find the perfect one for your design.

Tips, Edge Cases, or Limitations

1. Performance Considerations: While box shadows are GPU-accelerated, very large or blurry shadows can affect rendering performance, especially during animations. Consider using opacity or transform transitions instead for better performance.

2. Color Choices: Semi-transparent rgba() colors produce the most natural results. Experiment with different colors and opacities to achieve the desired effect.

3. Layered Shadows: In Layered mode, ensure that the layers do not overlap too much to avoid visual clutter. Experiment with different layer configurations to create the desired depth and dimension.

4. Presets: Presets are a quick way to get started, but you can always customize them to meet your specific needs.

Frequently Asked Questions

The CSS box-shadow property is used to add shadow effects around an element's frame. It takes five parameters: offset-x, offset-y, blur-radius, spread-radius, and color.
The blur-radius controls the softness of the shadow, while the spread-radius expands or contracts the shadow size beyond the element's dimensions. Negative values for spread-radius create a smaller shadow for more realistic lighting.
To create an inset shadow, add the 'inset' keyword before the offset values in the box-shadow property. This flips the shadow to the inside of the element.
In Layered mode, you can add multiple shadow layers. Each layer can be customized independently to create complex shadow effects.
The box-shadow property is used for creating shadows around an element's frame, while the filter: drop-shadow() property is used for creating shadows that are not constrained to the element's frame.

Quick reference

CSS Box Shadow Generator Quick Reference
Horizontal Offset Vertical Offset Blur Radius Spread Radius Color
2px 2px 4px 0 #000000
0 5px 10px 2px #888888
-3px 0 6px -1px #FF6600
4px -4px 8px 0 #0099FF
0 0 0 0 transparent
1px 1px 2px 0 rgba(0,0,0,0.3)