Free Online CSS Box Shadow Generator
Craft the perfect shadow with sliders, then copy the exact CSS.
A large blur creates a soft shadow; a small spread with zero blur creates a crisp border-like shadow.
About the CSS Box Shadow Generator
The CSS box-shadow property adds depth and emphasis to cards, buttons, modals, and images. It can
also create inset effects, glows, and subtle borders. This generator lets you tune every value visually and
copy the exact CSS.
What each value does
- Horizontal offset: moves the shadow left or right.
- Vertical offset: moves the shadow up or down. A positive value casts it downward.
- Blur radius: softens the edge. Larger values create a more diffuse shadow.
- Spread radius: expands or shrinks the shadow before blur is applied.
- Color and opacity: controls how visible the shadow is.
- Inset: draws the shadow inside the element instead of outside.
How to create a shadow
- Adjust the horizontal and vertical offsets first.
- Increase the blur for a softer look, or keep it at zero for a hard edge.
- Set the color and opacity to match your design.
- Copy the CSS and paste it into your stylesheet.
Frequently asked questions
Can I add more than one shadow?
Yes. CSS allows a comma-separated list of shadows. This generator creates one shadow, which you can duplicate and adjust in your stylesheet.
Why does my shadow look clipped?
The parent element may have overflow: hidden. Remove it or add padding so the shadow has room to render.
Are box shadows expensive for performance?
Large blurred shadows can be costly on low-end devices, especially during animation. Keep blur values moderate and avoid animating shadows in long lists.