CSS Box Shadow Generator
Stop typing numbers blindly. Visually design stunning, modern drop shadows and instantly copy the cross-browser compatible CSS code for your project.
How to Use
- Adjust the sliders on the left panel to position the X and Y offsets of the shadow.
- Increase the Blur Radius to soften the edges, and adjust the Spread Radius to make the shadow physically larger or smaller than the box itself.
- Use the color pickers to test how your custom shadow looks against dark mode backgrounds or vibrant brand colors. The tool intelligently translates your Hex color and opacity slider into a proper
rgba()CSS format. - Check the Inset box to pull the shadow inside the container, giving it a hollow or pressed-in effect.
- Click Copy CSS to grab the cross-browser compatible code snippet.
Features
Visual Engine
Stop guessing numbers. See exactly how the browser's lighting and rendering engine handles the shadow in real-time.
RGBA Support
Pure black shadows look terrible. This engine converts standard Hex colors into beautiful, transparent RGBA strings.
Negative Spread
Includes support for negative spread radiuses, a modern CSS trick used to make shadows look incredibly soft and realistic.
Cross-Browser
The code generator automatically injects `-webkit-` and `-moz-` prefixes to ensure the shadow works on older devices.
The Secret to Beautiful Drop Shadows
If your website looks outdated, your shadows are likely to blame. In the early days of web design, developers simply added harsh, 100% solid black borders around boxes. Today, the secret to a "premium" or "Apple-like" web aesthetic lies in extremely soft, incredibly subtle drop shadows.
To achieve a modern look:
- Lower the Opacity: Never use solid black. Push the shadow opacity down to 10% or 15%.
- Increase the Blur: The higher the blur, the softer and more realistic the lighting looks. Try pushing the blur above 20px.
- Use Negative Spread: This is a secret weapon. Setting the spread radius to a negative number (like
-5px) physically shrinks the shadow, allowing it to hide behind the box and only peek out softly at the edges.
The Frontend Design Suite
If you are building responsive interfaces, align your new boxes perfectly using our CSS Flexbox Generator and CSS Grid Generator. If you need to generate beautiful rounded corners to match your soft shadow, use the CSS Border Radius Generator.
Frequently Asked Questions
What does the 'Spread' value actually do?
By default, a shadow is exactly the same width and height as the box creating it. The Spread value tells the browser to physically inflate or deflate the base size of the shadow before applying the blur effect.
What does 'Inset' mean?
A standard shadow pushes outward, making the box look like it is floating above the screen. An 'Inset' shadow pushes inward from the borders, making the box look like a hollowed-out hole cut into the screen.
Why do I need the -webkit- and -moz- code?
While modern browsers (like Chrome 100+) understand standard box-shadow perfectly, thousands of users still browse the web on older iOS devices and legacy Firefox builds. Providing the vendor prefixes ensures the shadow renders properly for everyone.
Is it free?
Yes, 100% free with no limits.