Box Shadow Generator
Create beautiful CSS box shadows with real-time preview. Adjust parameters and copy production-ready code.
Live Preview
Generated CSS
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); background-color: #1149ee;
Position & Size
Negative values move shadow left, positive values move right
Negative values move shadow up, positive values move down
Higher values create more blurred, softer shadows
Positive values expand shadow, negative values contract it
Colors & Style
0% is fully transparent, 100% is fully opaque
Creates an inner shadow
Discussion
0 commentsShare your thoughts and help others with your experience
No comments yet
Be the first to share your thoughts and help others with your experience using this tool!
Related Tools
CSS Formatter
Beautify and format your CSS code for improved readability and structure.
CSS Minifier
Minify your CSS code to reduce file size and enhance performance.
CSS Gradient Generator
Create and customize beautiful CSS gradients with presets or custom settings.
CSS Glassmorphism Effect
Apply glassmorphism effects to your UI elements.
About Box Shadow Generator
What is Box Shadow?
Box shadow is a CSS property that adds shadow effects around an element's frame. It allows you to create depth and visual interest in your web designs by casting shadows behind elements.
How to Use This Tool
- •Adjust the horizontal and vertical offsets to position your shadow
- •Control the blur radius for soft or sharp shadows
- •Use spread radius to expand or contract the shadow
- •Customize colors and opacity for perfect styling
- •Toggle inset for inner shadow effects