CSS Box Shadow Generator
Visually design stunning box-shadows and instantly copy the CSS code for your web projects.
box-shadow: 10px 10px 15px -3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 10px 10px 15px -3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 10px 10px 15px -3px rgba(0, 0, 0, 0.1);
Related Tools
More tools in this category that you might find useful.
How to use CSS Box Shadow Generator Online
Adjust the horizontal and vertical offset to move the shadow around the box.
Increase the blur radius for a softer shadow, or decrease it for a hard, solid shadow.
Use the spread radius to grow or shrink the shadow's overall size.
Toggle 'Inset' if you want the shadow to appear inside the box.
Copy the generated CSS code to your clipboard.
Why use our CSS Box Shadow Generator Online?
Cross Browser Compatibility
The generated code includes -webkit- and -moz- vendor prefixes to ensure your box shadows work perfectly on Safari, Chrome, and older versions of Firefox.
100% Secure & Private
All processing happens in your browser. Your files are never uploaded to our servers, guaranteeing absolute privacy and security.
Lightning Fast
Because everything runs locally on your device, processing is instant. No waiting in queues or dealing with slow uploads.
Frequently Asked Questions
What does the Spread radius do?
A positive spread value will cause the shadow to expand and grow bigger than the box itself. A negative spread value will cause it to shrink.
Share this Tool
Related Guides & Strategies
Learn how to get the most out of this tool.