What is the CSS Box Shadow Generator?
The Box Shadow Generator is a free visual tool for web designers. It allows you to create beautiful, modern drop shadows using intuitive sliders, and instantly outputs the exact CSS code.
The Secret to Modern Shadows
A few years ago, harsh, dark drop shadows were popular. Today, modern web design (like \"Glassmorphism\" and sleek SaaS dashboards) relies on highly transparent, highly blurred, large spread shadows. The trick is to use a very low opacity (e.g., 5% to 15%) with a large blur radius to make the element look like it is floating naturally off the page.
Understanding the CSS Syntax
The CSS property box-shadow accepts values in a specific order: x-offset y-offset blur spread color. If you see the keyword inset added to the front, it means the shadow is cast inside the element rather than outside.
How to use this tool
- Adjust the X and Y Offset sliders to position the shadow horizontally and vertically.
- Adjust the Blur slider to make the shadow softer or sharper.
- Adjust the Spread slider to increase or decrease the physical size of the shadow.
- Change the shadow color and adjust the opacity (transparency) slider for a premium look.
- Click Copy to grab the CSS and paste it into your stylesheet.