CSS Box Shadow Generator
Visually create stunning drop shadows. Adjust offsets, blur, and spread, then copy the CSS code instantly.
How to Use
- Adjust the X and Y offsets to change the shadow's direction.
- Use the Blur Radius to make the shadow softer or sharper.
- Change the Spread Radius to make the shadow larger or smaller than the box.
- Toggle Inset to move the shadow inside the box.
- Adjust colors and click Copy to get the generated CSS.
Features
Live Preview
See exactly how the shadow looks in real time.
Precise Sliders
Fine-tune offsets, blur, and spread pixel by pixel.
RGBA Support
Automatically calculates hex to RGBA for opacity.
One-Click Copy
Instantly copy standard CSS3 syntax.
Use Cases
- UI Design: Create soft, modern elevation shadows for cards and modals.
- Buttons: Design interactive inset shadows for pressed button states.
- Glow Effects: Use bright colors with high blur and 0 offsets for neon glows.
- Prototyping: Quickly test shadow combinations without writing code.
Understanding CSS Box Shadows
The box-shadow CSS property adds shadow effects around an element's frame. You can specify multiple shadows separated by commas. The syntax order is: horizontal offset, vertical offset, blur radius, spread radius, and color. An optional inset keyword changes the shadow from an outer drop shadow to an inner shadow.
Design Workflow
Combine your box shadows with beautiful background colors using the CSS Gradient Generator. Find the perfect base colors with the Color Picker. Test your generated CSS live in the Online Code Editor. Finally, optimize your stylesheet with the CSS Minifier.
Frequently Asked Questions
What is Spread Radius?
Spread expands or contracts the size of the shadow. Positive values make the shadow larger than the element, while negative values make it smaller.
How do I create a glowing effect?
Set both X and Y offsets to 0, increase the blur radius, and use a bright, vibrant color (like neon blue or green).
Is the generated CSS cross-browser compatible?
Yes, standard box-shadow syntax is supported by all modern browsers (Chrome, Firefox, Safari, Edge).
What does Inset do?
The inset keyword draws the shadow inside the frame of the element, making the content appear sunken into the page.
Is it free?
Yes, 100% free with no limits.