Box Shadow Generator
box-shadow is the CSS property that casts a shadow behind an element. Drag the sliders for offset (X/Y), blur, spread, color and opacity, and the preview and the box-shadow value update live. Turn on inset for an inner shadow (a recessed look). Handy for lifting cards, buttons and inputs — everything runs in your browser.
Examples (click to try)
How to Use the Box Shadow Generator
Adjust offset (X/Y), blur, spread and color with the sliders, or pick an example chip. The preview and the box-shadow string update together. Turn on inset to cast the shadow inside the element for a recessed look.
Use it to tune card elevation, modal shadows, input inset effects and focus states before pasting the final CSS into your stylesheet. The preview gives quick feedback while keeping the output as standard CSS.
What each parameter does
- X (horizontal offset): positive moves the shadow right, negative left. Keep it 0 to drop straight down.
- Y (vertical offset): positive moves it down, negative up. A small positive Y reads as natural.
- blur: larger values soften the edge; 0 gives a hard-edged shadow.
- spread: positive makes the shadow larger than the element, negative shrinks it — for fine-tuning the lift.
- color & opacity: the shadow's color and strength; black at 10–20% blends with most backgrounds.
- inset: draws the shadow inside the element for a recessed look (inputs, toggles).
Examples
- Subtle card →
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15); - Strong lift →
box-shadow: 0px 10px 30px -4px rgba(0,0,0,0.25); - Inset →
box-shadow: inset 0px 2px 4px 0px rgba(0,0,0,0.20); - Brand color →
box-shadow: 0px 6px 16px 0px rgba(234,99,121,0.35);
Practical Tips
- For most UI cards, combine a positive Y offset with a soft blur and low opacity.
- Use spread sparingly; large spread values can make shadows look heavy.
- Inset shadows work best for pressed controls, input wells and recessed surfaces.
FAQ
Is my data sent to a server?
No. Everything runs in your browser; nothing is transmitted or stored externally.
How do I make a natural-looking shadow?
Keep X at 0, push Y slightly positive (downward), use a larger blur, and a black color at low opacity (10–20%). Example: box-shadow: 0 4px 12px rgba(0,0,0,0.15).
What is inset for?
With inset, the shadow falls inside the element for a pressed-in look. Useful for inputs and toggles that should appear recessed. Example: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2).
Can I stack multiple shadows?
CSS accepts several shadows separated by commas. This tool builds one shadow, so copy the output and join values with commas — layering a near and a far shadow adds depth.
What is spread for?
Spread grows the shadow beyond the element (positive) or shrinks it (negative). A negative value tucks the shadow in, so pairing it with Y keeps a shadow on just one side. Start at 0 and adjust it to fine-tune how much the element lifts.
Does adding a shadow shift the layout?
No. box-shadow does not change the element's box size and never pushes neighboring elements around, unlike margin or border, so you can add it to an existing design safely. Use margin or transform if you actually want to move the element.
Why can I not see the shadow through an element with a transparent background?
By specification an outer shadow is never painted inside the element's own box, so it does not peek out from underneath even when the background is transparent. Use inset when you want the shadow drawn inside the element.
Can it output units other than px?
The generator always writes px. CSS also accepts em and rem, so edit the units after copying if you want the shadow to scale with font size. A value of 0 can drop its unit entirely.