Box Shadow Generator
Generate CSS box shadows with an interactive visual editor. Adjust all shadow properties and see changes in real-time. Get ready-to-use CSS code instantly.
- No data sent to server
- Works completely offline
- No server required
- No login or signup needed
How It Works
Use the sliders to adjust shadow properties: horizontal offset (X), vertical offset (Y), blur radius, spread radius, shadow color, and opacity. Toggle between outer and inset shadows. The tool provides a live preview showing exactly how your shadow will look. You can add multiple shadows to create layered effects. The generated CSS code is ready to copy and paste into your stylesheet. Includes popular shadow presets for quick starts. All generation happens in real-time in your browser.
Frequently Asked Questions
What is box-shadow in CSS?
Box-shadow is a CSS property that adds shadow effects around an element. It can be used to create depth, elevation, and visual hierarchy.
What do the offset values mean?
X offset moves the shadow horizontally (positive = right, negative = left). Y offset moves it vertically (positive = down, negative = up).
What's the difference between blur and spread?
Blur makes the shadow softer and more diffused. Spread makes the shadow larger or smaller overall.
What is an inset shadow?
Inset shadows appear inside the element instead of outside, creating a recessed or pressed effect.
Can I add multiple shadows?
Yes! The tool supports multiple layered shadows for complex effects. Each shadow can have different properties.