CSS Box Shadow Generator
Design layered box shadows with sliders and copy the CSS. Everything runs in your browser, so your input isn’t uploaded.
Loading tool…
How to use the CSS Box Shadow Generator
- Adjust the sliders for the selected layer.
- Add layers for richer shadows, or tick Inset for an inner shadow.
- Copy the CSS.
Example
A soft, low-opacity shadow, which is a good starting point for cards.
Offset X: 0 Offset Y: 4 Blur: 12 Spread: 0 Color: black at 20% opacity
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
About this tool
A box shadow adds depth to an element. Adjust the sliders to change the offset, blur, size and color, stack several layers for a softer effect, and copy the finished CSS.
Good to know
- Subtle shadows with low opacity usually look the most natural.
- Large blur values on big elements can slow rendering on low-end devices.
- A shadow doesn’t change an element’s size or affect the layout around it.
Related tools
- HEX, RGB & HSL Color Converter – Convert colors between HEX, RGB and HSL, with transparency.
- CSS Gradient Generator – Build linear, radial and conic gradients and copy the CSS.
- CSS Border Radius Generator – Round each corner independently, including elliptical corners, and copy the CSS.