CSS Box Shadow Generator
Design smooth CSS box-shadow effects with horizontal/vertical offset, blur, spread, opacity, and inset controls.
Your files are processed in your browser and are not uploaded to our server.
Shadow Attributes
Horizontal Offset (X)0px
Vertical Offset (Y)10px
Blur Radius25px
Spread Radius-5px
#000000
Opacity15%
Elevation Presets
Interactive Object
CSS Code
How to Use CSS Box Shadow Generator
1
Adjust Sliders
Configure X and Y offset, blur radius, and spread distance.
2
Pick Color & Opacity
Select shadow color and tune the transparency slider.
3
Copy Code
Copy the generated box-shadow CSS property for your stylesheet.
Key Features
Sliders for Horizontal Offset, Vertical Offset, Blur Radius, and Spread
Color picker with real-time RGBA opacity slider
Inset shadow toggle for inner shadows
One-click presets: Subtle Soft, Floating Card, Deep Elevation, and Inner Inset
Frequently Asked Questions
Everything you need to know about this tool and data privacy.
A positive spread value expands the shadow in all directions, while a negative value contracts the shadow smaller than the element.
Related Tools
More tools in the same category you might find useful
generator
Password GeneratorPopular
Generate cryptographically strong, random passwords with custom length, symbols, numbers, and strength score.
Browser OnlyOpen Tool
generator
QR Code GeneratorPopular
Generate customizable QR codes for URLs, text, WiFi, or contact details with downloadable PNG and SVG images.
Browser OnlyOpen Tool
generator
UUID Generator
Generate random RFC 4122 Version 4 UUIDs / GUIDs in bulk with customizable hyphens and uppercase options.
Browser OnlyOpen Tool