Shadow Generator
Create custom box-shadows with a visual editor. Add multiple shadow layers, adjust offsets, blur, spread, and export to CSS or Tailwind.
Preview
Shadow Layers (2/4)
Layer 1
#000000
Layer 2
#000000
Export Shadow
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);How to Use
- Adjust X/Y offset sliders to position the shadow
- Use blur to soften the shadow edges
- Adjust spread to expand or contract the shadow
- Click the color swatch to change shadow color
- Toggle "Inset" for inner shadows
- Add up to 4 layers for complex effects
- Copy the CSS or Tailwind code
Frequently Asked Questions
What is box-shadow? ▼
Box-shadow is a CSS property that adds shadow effects around an element. It can create depth, elevation, and visual hierarchy in your designs.
What does inset do? ▼
An inset shadow appears inside the element instead of outside, creating an embossed or pressed-in effect.
Why use multiple shadow layers? ▼
Multiple layers create more realistic, natural-looking shadows. Combining a soft large shadow with a smaller sharp one mimics real-world lighting.
What is spread in box-shadow? ▼
Spread expands or contracts the shadow size. Positive values make the shadow larger, negative values make it smaller than the element.