CSS Box Shadow Generator
Tune a shadow live — copy the exact CSS
Controls
Preview
CSS
CSS Box Shadow Generator — Complete Guide & Instructions
MakeCard CSS Box Shadow Generator replaces trial-and-error shadow tweaking with six live sliders. Set horizontal and vertical offset, blur and spread radii, opacity, pick a shadow colour, and flip the Inset checkbox for inner shadows — the preview card redraws instantly. When it looks right, copy the finished declaration, emitted with proper rgba() colour and inset keyword where needed.
How to Use CSS Box Shadow Generator
- 1 Drag the Horizontal and Vertical offset sliders to position the shadow.
- 2 Soften it with the Blur radius slider.
- 3 Grow or shrink it with the Spread radius slider (negative values shrink).
- 4 Set the Opacity and click the colour swatch to choose a shadow colour.
- 5 Tick Inset to switch to an inner shadow.
- 6 Press Copy in the CSS panel to grab the ready-to-paste box-shadow rule.
Key Features & Capabilities
- Horizontal and vertical offsets from −50 to +50 px.
- Blur radius up to 100 px for hard or diffused edges.
- Spread radius including negative values for tight shadows.
- Shadow colour picker plus independent opacity slider — output in rgba().
- Inset toggle for inner-shadow effects.
- Live preview on a white card so shadows read exactly as they will in production.
Supported Formats & Specifications
| Parameter | Specification |
|---|---|
| Offsets | X and Y, −50 to +50 px |
| Blur / Spread | 0–100 px blur, −50 to +50 px spread |
| Colour | Any colour + 0–100% opacity (rgba output) |
| Mode | Outer or inset shadow |
| Output | Single-line box-shadow CSS declaration |
Practical Everyday Use Cases
- Designing soft Material-style elevation for cards and modals.
- Creating subtle text-field inset shadows.
- Matching a shadow from a Figma or design handoff.
- Building coloured glow effects with high blur and zero spread.
- Teaching how offset, blur and spread each change a shadow.
Pro Tips for Best Results
- Realistic shadows rarely use pure black — pick a dark tint of your page background colour.
- Combine small offset with big blur for “floating” elevation; zero blur for hard graphic shadows.
- Negative spread tightens a shadow so it reads as a border alternative.
- Stack two shadows (duplicate the rule, comma-separate) for richer depth — one tight, one diffuse.
Common Problems & Solutions
Raise opacity and reduce blur — diffuse shadows need colour saturation to read on white backgrounds.
Inset shadows appear inside the element — check the element has a visible background colour and no content covering the inner edge.
Privacy & Security
100% Client-Side Execution
All rendering happens in your browser — your settings and code stay on your device.
Frequently Asked Questions
Everything you need to know about using CSS Box Shadow Generator
Order is: horizontal offset, vertical offset, blur radius, spread radius, then colour — optionally prefixed by inset for an inner shadow.
Add the inset keyword — tick the Inset checkbox here and the generated code includes it.
Opacity control — the generated rgba() lets the shadow layer sit over coloured backgrounds without a visible hard edge.
Yes — comma-separate several box-shadow declarations; generate each here and combine them manually.
A common starting point: 0px 4px 12px with ~15% black — small offset, moderate blur, low opacity.
Related FreeToolsBazaar Tools
Ready to Use CSS Box Shadow Generator?
100% free, browser-based, and private. No installation, registration, or file upload to external servers required.
Start Using CSS Box Shadow Generator