A box shadow in CSS is defined by the box-shadow property, which takes up to six parts: an optional inset keyword, an offset-x, an offset-y, an optional blur-radius, an optional spread-radius, and a color. This CSS box shadow generator exposes each of those parameters as a live control and renders the exact declaration as you drag, so you never have to guess how blur and spread interact or mentally translate numbers into pixels.
The value that most developers get wrong is spread-radius, the fourth length. A positive spread grows the shadow uniformly in every direction before the blur is applied; a negative spread shrinks it, which is the trick behind tight, inset-looking edges and directional drop shadows. Because you see the preview update in real time, you can build the effect visually and copy a correct, ready-to-paste box-shadow declaration.
The tool also handles the parts that are easy to forget: toggling the inset keyword to move the shadow inside the element, tuning the rgba/hsla alpha so the shadow reads as depth rather than a hard black band, and stacking multiple comma-separated shadows into a single property for layered, realistic elevation.
Building a shadow step by step
- 1
Set the horizontal and vertical offset (offset-x and offset-y) to position the shadow. For a light source above the element, keep offset-x near 0 and give offset-y a small positive value like 4px.
- 2
Increase the blur-radius to soften the edge. Larger blur reads as a higher, more diffuse light source; 0 produces a hard-edged shadow.
- 3
Adjust the spread-radius to grow or shrink the shadow before blur. Use a small negative spread to keep the shadow tucked under the element for a natural drop.
- 4
Pick the color and lower its alpha (opacity) so the shadow tints rather than blocks the background. Toggle the inset switch if you want the shadow rendered inside the box.
- 5
Read off the generated box-shadow value in the live preview and copy it straight into your stylesheet.
Where this comes in handy
Elevation systems for cards and modals
Dial in a consistent set of shadows for different elevation levels, mirroring Material-style depth tiers, and reuse them across cards, dropdowns, and dialogs.
Layered, realistic depth
Stack two or three comma-separated shadows, a tight dark one plus a wide soft one, to approximate ambient and key lighting instead of a single flat shadow.
Inner shadows for inputs and wells
Flip on inset to recess form fields, pressed buttons, or content wells so they read as carved into the surface rather than floating above it.
Focus and hover feedback
Prototype the shadow that appears on :hover or :focus states before wiring up the transition, so interactive elements lift predictably on interaction.
Practical notes and gotchas
- Prefer rgba/hsla colors with alpha between roughly 0.1 and 0.3 over opaque black. A semi-transparent shadow blends with any background, while solid #000 produces a muddy halo.
- Layer shadows instead of maxing out blur on one. A small close shadow plus a large diffuse one looks far more physical than a single large-blur shadow.
- Animating box-shadow can be expensive because it triggers repaints. For hover lifts, animate a pseudo-element's opacity or use will-change sparingly, or cross-fade between two stacked shadows.
- box-shadow follows the element's border-radius but does not affect layout, so it never nudges surrounding elements. Use it, not margins, for elevation.
- For a real drop shadow that hugs a transparent PNG or an irregular SVG shape, box-shadow won't work; reach for the filter: drop-shadow() function instead, which respects the alpha outline.
Common questions
What is the difference between blur and spread in box-shadow?+
Spread (the fourth value) resizes the shadow uniformly before any blur is applied, so a positive spread makes it larger and a negative one smaller. Blur (the third value) softens the shadow's edge; the two are independent and are often combined.
How do I make an inner shadow in CSS?+
Add the inset keyword to the box-shadow value, for example box-shadow: inset 0 2px 4px rgba(0,0,0,0.2). Without inset the shadow is drawn outside the element; with it, the shadow is painted inside the border box.
Can I apply more than one box shadow to an element?+
Yes. Separate multiple shadow definitions with commas in a single box-shadow declaration. They are painted back to front, with the first shadow on top, which is how layered elevation effects are built.
Why isn't my box-shadow following the shape of my image?+
box-shadow is drawn from the element's rectangular border box (respecting border-radius), not from the visible pixels of an image. To cast a shadow that follows a transparent PNG or SVG outline, use filter: drop-shadow() instead.
Is box-shadow supported in all browsers?+
Yes. box-shadow is supported unprefixed in every modern browser, including all current versions of Chrome, Firefox, Safari, and Edge. Vendor prefixes like -webkit- and -moz- are no longer needed.
What units can I use for the offset, blur, and spread values?+
Any CSS length unit works, including px, em, and rem; offsets and spread also accept negative values while blur cannot be negative. Pixels are most common for precise, predictable shadows.