Box Shadow Generator — Free Online Tool
Create CSS box shadows with live preview and instant code generation.
Shadow Controls
Preview
About Box Shadow Generator
The Box Shadow Generator creates CSS box-shadow code with a live visual preview. Adjust horizontal and vertical offsets, blur radius, spread radius, and shadow color using intuitive sliders and color pickers.
Perfect for web designers and developers who want to create professional shadow effects without manually tweaking CSS values. See changes in real-time and copy the generated code instantly.
How to Use Box Shadow Generator
- Adjust the horizontal and vertical offset sliders.
- Set the blur radius for soft or sharp shadows.
- Configure spread radius to expand or contract the shadow.
- Pick a shadow color and adjust opacity.
- Copy the generated CSS code to your clipboard.
Key Features
Live shadow preview
Horizontal and vertical offset controls
Blur radius slider (0-100px)
Spread radius slider (-50 to 50px)
Color picker with opacity control
Inset shadow toggle
One-click CSS copy
Responsive preview box
Frequently Asked Questions
What is box-shadow in CSS?
Box-shadow is a CSS property that adds shadow effects around an element's frame. You can control offset, blur radius, spread radius, and color.
What do the shadow values mean?
Horizontal offset (X), vertical offset (Y), blur radius (how soft the shadow is), spread radius (how large it grows), and color.
Can I create multiple shadows?
Yes! Add multiple box-shadows by separating them with commas. This tool focuses on single shadow generation, but you can combine multiple manually.
What's the difference between inner and outer shadows?
Outer shadows (default) appear outside the element. Inner shadows (inset keyword) appear inside the element's border.
How do I copy the CSS code?
Click the 'Copy CSS' button to copy the complete box-shadow property to your clipboard, ready to paste into your stylesheet.