What is CSS Box Shadow?
Box shadow is a effect that allow you to a shadow on html element. It looks like the element is raised on the page. We can use box-shadow property in CSS to add shadow to the box.
How to generate CSS box shadow code with this tool?
Here the simple explanation of all features with its usage:
Horizontal Length
This is the horizontal offset of the shadow. A positive value will push the shadow right and a negative value will push it left. Max is 200 and min is -200.
Vertical Length
This is the vertical offset of the shadow. A positive value will push the shadow down and a negative value will push it up. Max is 200 and min is -200.
Blur Radius
This is the blur radius of the shadow. The higher the value, the more blurred the shadow will be. Max is 300 and min is 0.
Spread Radius
This is the spread radius of the shadow. A positive value will expand the shadow and a negative value will shrink it. Max is 200 and min is -200.
Shadow Color
This is the color of the shadow. You can choose any color you want.
Shadow Opacity
This is the opacity of the shadow.
Shadow Type
This is the type of the shadow. You can choose from the following types:
- Inset : The shadow is inside the box.
- Outset : The shadow is outside the box.
Box Color
This is given just to change the background color of the box to see the shadow effect. This is not a part of the shadow.
Pure CSS and Tailwind CSS code support
This tool help you to generate Pure CSS as well as Tailwind CSS code for the shadow. You can copy the code and use it in your project.
Conclusion
Box shadows can really make your elements pop on the page. Instead of writing CSS from scratch and adjusting values over and over, this tool lets you see the changes in real-time and get the exact code you need.
The best part is you get both regular CSS and Tailwind CSS code, so whatever framework you're using, you're covered. Play around with the settings, try different combinations, and see what looks good for your design.
Once you find the perfect shadow, just copy the code and drop it into your project. Simple as that.