Results are provided for informational purposes only and may contain errors. Please verify important information independently. Use of this tool is at your own risk.
What the Box Shadow Generator does
The Box Shadow Generator builds a CSS box-shadow with sliders for the horizontal offset, vertical offset, blur, spread, color and opacity. The preview box updates as you drag and the output line is ready to copy. It opens with a soft shadow 10px below the box, 20px of blur and 25% black.
The four lengths are written in CSS order: x offset, y offset, blur radius, spread radius. Positive offsets move the shadow right and down; negative values move it left and up. Blur softens the edge, and spread grows or shrinks the shadow before blurring. The color is written as rgba() so the opacity is built in and the shadow blends with any background.
When to use it
- Giving cards, modals and dropdowns depth in a flat design.
- Matching the elevation levels of a design system such as Material Design.
- Adding a subtle focus or hover effect to buttons.
- Creating a coloured glow by using a zero offset and a bright color.
Worked example
Input
X 0, Y 10, blur 20, spread 0, color #000000, opacity 25%Output
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);Common questions about the Box Shadow Generator
How do I make an inner shadow?
Add the keyword inset at the start of the value: box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.25);. The shadow is then drawn inside the box, which suits pressed buttons and input fields.
Can I combine several shadows?
Yes, separate them with commas. Realistic elevation often uses two: a small sharp shadow for the edge and a large soft one for depth, for example 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.12).
Why does my shadow look grey and dirty on a colored background?
Pure black at low opacity desaturates the colors underneath. Use a darker shade of the background color instead of black for a cleaner result.
Do shadows slow down the page?
Static shadows are cheap. Animating a large blurred shadow can cost frames on slow devices; animate the opacity of a pseudo-element that carries the shadow instead.
Is this tool free?
Yes, it's free to use. No signup, no email required. Get results on this page.
How do I get my result?
Use the tool on this page. Your result appears here; no email delivery is required.