CSS Box Shadow Generator
Tune a box shadow with sliders for offset, blur, spread, color and opacity, watch the live preview and copy the CSS.
How to make a CSS box shadow
- Move the offset X and Y sliders to set where the shadow falls.
- Adjust blur and spread to make the shadow soft or sharp, then choose its color and opacity. Tick Inset for an inner shadow.
- Click Copy CSS and paste the box-shadow line into your stylesheet.
Features
Every box-shadow value
Offset X and Y, blur, spread, color, opacity and inset.
Live preview
Change page color, box color and radius to match your design.
Copy clean CSS
Standard box-shadow syntax with rgba color.
Private
Everything runs in your browser; nothing is sent anywhere.
How the CSS box-shadow property works
The CSS box-shadow property adds shadows around an element's frame, which gives cards, buttons, menus and images a sense of depth. A shadow is described by up to six values written in order: inset (optional), horizontal offset, vertical offset, blur radius, spread radius and color, for example 10px 10px 30px 0 rgba(0, 0, 0, 0.35).
The offsets move the shadow right and down when positive, left and up when negative. The blur radius softens the edge: 0 gives a hard shadow and larger values give a smoother, wider glow. Spread grows or shrinks the shadow before blur is applied, and a negative spread with a positive blur gives the modern "floating card" look. Adding the inset keyword draws the shadow inside the box, which is useful for pressed buttons and input fields.
For natural results, use soft shadows with low opacity, between 10 and 35 percent, and keep the vertical offset larger than the horizontal one, as if light comes from above. Dark mode designs often need a stronger or darker shadow to be visible. You can also stack several shadows by separating them with commas, which you can do by pasting more than one generated line into one declaration.
Frequently asked questions
What do the box-shadow values mean?
In order they are: optional inset, horizontal offset, vertical offset, blur radius, spread radius and color. For example 5px 5px 15px 0 rgba(0,0,0,.3).
What is the difference between blur and spread?
Blur softens the edge of the shadow. Spread makes the whole shadow larger (positive) or smaller (negative) before it is blurred.
How do I make an inner shadow?
Tick the Inset option. The shadow is then drawn inside the element’s border instead of outside.
How do I add opacity to a shadow?
Use the Opacity slider. The color is written as rgba(), where the last number is the opacity from 0 to 1.
Can I use more than one shadow?
Yes. In CSS you can list several shadows separated by commas. Generate each one here and combine them in your stylesheet.