CSS Box Shadow Generator
Generate CSS box shadows visually. Adjust values and copy the code instantly.
What is CSS Box Shadow?
The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple shadows separated by commas. It is widely used to create depth, elevation effects, and card-style UI components in modern web design.
Box Shadow Syntax
box-shadow: offset-x offset-y blur-radius spread-radius color inset;
Features
- Live preview of your box shadow
- Adjust horizontal and vertical offset
- Control blur radius for smooth shadows
- Set spread radius for shadow expansion
- Choose shadow color with color picker
- Adjust opacity for transparency
- Support for inset shadows
- Copy CSS code instantly
How to Use
- Adjust the sliders to customize your box shadow
- Choose your preferred shadow color
- Enable "Inset shadow" for inner shadows
- Copy the generated CSS code
- Paste it into your CSS file