CSS Box-Shadow Generator
Visually design complex CSS box-shadow effects. Adjust offsets, blur, spread, and colors, then instantly copy the generated code.
Controls
Adjust the sliders and colors to create your shadow.
Preview
CSS Code
What is CSS Box-Shadow?
The `box-shadow` CSS property adds shadow effects around an element's frame. You can specify multiple effects separated by commas. A shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. Using this tool, you can visually fine-tune these values to achieve the perfect look for your components without writing the code by hand.