CSS Box Shadow Generator 🪄
Design multi-layered shadows visually and copy the CSS instantly.
What is a CSS Box Shadow?
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.
How to Use Multiple Shadows
Using multiple shadow layers can create highly realistic, smooth shadows or complex styling effects. By stacking shadows—often combining a sharp, dark shadow for depth with a broad, faint shadow for ambient occlusion—you can achieve a sophisticated "layered" look. Just separate each shadow declaration with a comma in your CSS:
box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1);
Anatomy of the Box Shadow Property
- Horizontal Offset (X): Positive values push the shadow to the right, negative to the left.
- Vertical Offset (Y): Positive values push the shadow down, negative up.
- Blur Radius: Higher values make the shadow larger and lighter. A value of 0 means the shadow is completely sharp.
- Spread Radius: Positive values cause the shadow to expand and grow bigger, negative values cause it to shrink.
- Color: Sets the color of the shadow. Using rgba (which includes an alpha channel for opacity) is generally recommended to allow the background to blend naturally with the shadow.
- Inset: Changes the shadow from an outer shadow (outset) to an inner shadow.
Browser Compatibility
The box-shadow property is fully supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. Our tool generates standard CSS that works universally without vendor prefixes.