Developer Tools
CSS Gradient Generator
Visually create beautiful CSS gradients. Supports linear, radial, angles, and multiple color stops.
CSS Box Shadow Generator
A visual CSS box-shadow generator for web developers and designers. Easily design complex drop shadows or inset shadows by adjusting X/Y offsets, blur radius, spread radius, and shadow color with opacity. See the results instantly and copy the cross-browser CSS code.
Shadow Preview
CSS Code
box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.25);
Shadow Settings
What is the CSS Box Shadow Generator?
The CSS Box Shadow Generator is a visual sandbox for creating shadow effects without writing CSS manually. It provides intuitive sliders for all shadow properties (offset, blur, spread, opacity) and outputs the exact CSS code instantly.
How to Use
- Use the Horizontal and Vertical sliders to set the shadow offset (X and Y).
- Adjust the Blur slider to soften the shadow.
- Use the Spread slider to grow or shrink the shadow.
- Pick a shadow color and adjust the opacity.
- Toggle the "Inset" switch to put the shadow inside the box.
- Copy the generated CSS code block directly into your stylesheet.
Common Use Cases
- Adding depth and elevation to UI cards and modal windows.
- Creating glowing effects on buttons when hovered.
- Designing neomorphic or "soft UI" elements with inset and drop shadows.
Key Benefits
- No CSS memorization required.
- Instant visual feedback.
- Generates clean, correct CSS syntax with RGBA colors for proper opacity.
- 100% client-side, fast and secure.
Frequently Asked Questions
What is a CSS box-shadow?
The box-shadow CSS property adds shadow effects around an element's frame. You can specify multiple effects separated by commas, creating everything from simple drop shadows to complex glowing effects.
What is an inset shadow?
By default, shadows drop outside the element. An inset shadow (using the `inset` keyword) draws the shadow inside the frame, making the element look pressed in or stamped.
What do blur and spread do?
The blur radius makes the shadow larger and lighter, softening the edges. The spread radius expands (positive value) or shrinks (negative value) the shadow's base size before it is blurred.
Discover More Tools
Explore our full collection of free, privacy-first developer and SEO tools.
Browse All Tools