CSS Box Shadow Generator
Generate CSS box-shadow visually. Adjust offset, blur, spread, colour, and copy the code.
CSS Code
box-shadow: 5px 5px 15px 0px #00000040;
CSS Box Shadows: Adding Depth to Flat Design
Box shadows create the illusion of depth on a flat screen. They make cards feel like they're floating, buttons look pressable, and modals appear to sit above the page. Without shadows, everything feels flat and disconnected — with too many, everything looks like a 2012 skeuomorphic app.
The box-shadow property takes up to six values: horizontal offset, vertical offset, blur radius, spread radius, colour, and an optional "inset" keyword. The trick is using subtle, realistic shadows — most well-designed sites use shadows so subtle you don't consciously notice them.
This generator lets you adjust all shadow parameters visually and see the result in real time. Tweak the values, layer multiple shadows, and copy the CSS. No more guessing at rgba values.
Box Shadow Property Explained
| Value | What It Does | Typical Range |
|---|---|---|
| X offset | Horizontal position of the shadow | 0–20px (right), -20–0px (left) |
| Y offset | Vertical position of the shadow | 2–30px (below, most common) |
| Blur radius | How soft/blurry the edge is | 4–40px (larger = softer) |
| Spread radius | How much the shadow expands/shrinks | -5–10px (often 0 or negative) |
| Colour | Shadow colour (usually translucent black) | rgba(0,0,0,0.05–0.25) |
| Inset | Places shadow inside the element | Used for input focus and pressed states |
What this means for you: For most card-style shadows, you want: small Y offset (2-8px), moderate blur (8-24px), zero spread, and very low opacity (0.05-0.15). The shadow should be barely visible — that's what makes it look realistic.
Shadow Design Patterns
Layered shadows (most realistic)
Use 2-3 shadows of different sizes for realism. A tight, dark shadow near the element and a large, soft one further out mimics real-world lighting. Google's Material Design uses this approach.
Hover elevation
Increase shadow spread and blur on hover to create a "lifting" effect. Transition the box-shadow property for smooth animation. This works beautifully on cards and buttons.
Coloured shadows
Instead of black, use a darker shade of the element's background colour for its shadow. A blue card with a dark blue shadow looks more cohesive than one with a grey shadow. Glassmorphism popularised this technique.
Inset shadows
Inset shadows make elements look recessed or pressed in. Perfect for active button states, text input fields, and neumorphism effects. Combine with a subtle outer shadow for the classic "pressed button" look.
Shadow Presets to Copy
These are production-ready shadows used by popular design systems. Copy the one that fits your use case:
| Name | CSS | Use Case |
|---|---|---|
| Subtle | 0 1px 3px rgba(0,0,0,0.08) | Cards, list items |
| Medium | 0 4px 12px rgba(0,0,0,0.1) | Dropdowns, popovers |
| Elevated | 0 8px 30px rgba(0,0,0,0.12) | Modals, floating panels |
| Layered (realistic) | 0 1px 2px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.07) | Premium card feel |
| Coloured glow | 0 4px 20px rgba(59,130,246,0.3) | Focus states, CTAs |
| Inset | inset 0 2px 4px rgba(0,0,0,0.1) | Input fields, pressed buttons |
Related Tools
How to use this tool
Adjust the X/Y offset, blur, and spread sliders
Pick a shadow colour and toggle inset if needed
Copy the generated CSS code to your stylesheet
Common uses
- Adding depth to card and panel components
- Creating hover elevation effects on buttons
- Designing neumorphism and glassmorphism UIs
- Styling modal and dropdown overlays
Share this tool