CSS Box Shadow Generator
Visually create CSS box shadows with real-time preview. Support for multiple shadow layers, inset shadows, and full customization.
Shadow Layers
How to Create CSS Box Shadows Online
- 1. Adjust the shadow offset (X and Y), blur radius, and spread radius using the sliders.
- 2. Pick a shadow color and adjust its opacity for the desired effect.
- 3. Toggle Inset for inner shadows. Click + Add Layer to stack multiple shadows.
- 4. Preview changes in real time, then click Copy CSS to use in your project.
Frequently Asked Questions
What are the box-shadow values?
The CSS box-shadow property takes: offset-x, offset-y, blur-radius, spread-radius, and color. Optionally, add "inset" keyword for inner shadows. Example: box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.35);
Can I use multiple box shadows?
Yes! CSS supports multiple box shadows separated by commas. This tool lets you add multiple shadow layers that stack on top of each other for complex shadow effects.
What is the difference between blur and spread?
Blur radius controls how much the shadow is blurred (higher = softer). Spread radius expands or contracts the shadow size. A positive spread makes the shadow larger, while a negative spread makes it smaller than the element.
What are inset shadows?
Inset shadows appear inside the element instead of outside. They create a pressed-in or embedded effect. Toggle the "Inset" checkbox on any shadow layer to make it an inner shadow.