CSS Box Shadow Generator
Create beautiful shadows for your elements
Generate CSS box shadows with custom offset, blur, spread, color, and inset options. Perfect for cards, buttons, and UI elements.
Shadow Preview
Box Shadow
CSS Code
box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.3);
Popular Shadow Styles
Click on any example to apply it
Soft Shadow
Subtle Elevation
Glow Effect
Hard Shadow
Inset Shadow
Spread Negative
Top-Left Glow
Floating Card
How to Use This Tool
Adjust Sliders
Use the sliders to control offset, blur, spread, and opacity of the shadow.
Pick Color
Choose shadow color and adjust transparency for different effects.
Try Options
Enable inset for inner shadows or multiple shadows for complex effects.
Copy & Apply
Copy the CSS code and apply it to your buttons, cards, or UI elements.