Generate CSS box-shadow visually. Adjust offset, blur, spread, color and inset with live preview.
What is CSS box-shadow?
CSS box-shadow adds shadow effects around an element's frame. You can set multiple effects separated by commas, including offset, blur, spread, and color.
What is the inset keyword?
The inset keyword changes the shadow to an inner shadow, making it appear inside the element instead of outside.
What is blur radius?
Blur radius determines how much the shadow's edge is blurred. A larger value creates a softer, more diffused shadow. Zero creates a sharp edge.
What is spread radius?
Spread radius expands or contracts the shadow. Positive values make the shadow larger, negative values make it smaller than the element.