A card that sits flat on the page feels dead. Add a soft shadow and gently rounded corners, and suddenly it looks like something you can pick up. Getting there by typing numbers and refreshing the browser is slow, though. This generator lets you drag sliders, watch the result change as you go and copy the finished CSS when you’re happy with it.
Move the shadow controls and watch the preview box update.
Pick a shadow colour and set its opacity. Subtle usually looks better than strong.
Use the corner controls to round the box. Link the four corners to change them together, or unlink them to shape each one.
Copy the CSS code from the output box and paste it into your stylesheet.
Box-shadow
Control
What it does
Horizontal offset
Moves the shadow sideways. Positive goes right, negative goes left
Vertical offset
Moves the shadow up or down. Positive goes down, negative goes up
Blur radius
Softens the edge. A larger value gives a wider, fuzzier shadow. It can’t be negative
Spread radius
Makes the shadow bigger (positive) or smaller (negative) before blurring
Colour and opacity
The shadow’s colour and how see-through it is
Inset
Draws the shadow inside the box instead of outside it
Border-radius
The radius sets how curved each corner is, in pixels or percentages. A bigger number means a rounder corner.
box-shadow: inset(optional) offset-x offset-y blur spread colour
css
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
That reads: no sideways offset, 4px down, 12px of blur, no spread, and black at 15% opacity. The spread value is optional, so you’ll often see it written as 0 4px 12px rgba(0, 0, 0, 0.15).
border-radius: one to four values, starting at the top left and going clockwise
css
border-radius: 12px; /* all four corners */
border-radius: 12px 4px; /* top-left and bottom-right 12px, the other two 4px */
border-radius: 12px 4px 20px 0; /* top-left, top-right, bottom-right, bottom-left */
A soft card
css
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 12px;
A subtle lift for buttons and inputs
css
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
border-radius: 6px;
A layered shadow. Stacking several shadows, each a little larger and fainter than the last, often looks more natural than a single heavy one:
css
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.07),
0 2px 4px rgba(0, 0, 0, 0.07),
0 4px 8px rgba(0, 0, 0, 0.07),
0 8px 16px rgba(0, 0, 0, 0.07);
A pressed-in look. An inset shadow makes a field or a button look sunken:
css
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
A hard offset shadow. No blur gives a bold, graphic style:
css
box-shadow: 4px 4px 0 #000;
A glow
css
box-shadow: 0 0 20px rgba(52, 152, 219, 0.6);
A focus ring. A shadow with no blur and a spread acts like an outline that follows the rounded corners:
css
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5);
Slightly rounded: border-radius: 4px to 8px for a clean, modern feel
Cards and panels: 12px to 16px
Circle: border-radius: 50% on an element with equal width and height. On a rectangle, 50% makes an ellipse
Pill or capsule button: border-radius: 9999px. A huge value works because the browser scales the curve down to fit
Tab shape: border-radius: 12px 12px 0 0, rounded on top and square at the bottom
Organic blob: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%. The slash lets you set the horizontal and vertical curves separately
Keep it light. Low opacity, between 8% and 20%, is easier on the eye than a dark, heavy shadow.
Use one light direction. If one card’s shadow falls down and to the right, the others should too.
Bigger elements, bigger shadows. The higher something seems to float, the larger the offset and blur should be.
Tint your shadows. A shadow with a hint of your background colour often looks more natural than pure black.
Match corner sizes. Use one or two radius values across the site so the design feels consistent.
Round nested boxes correctly. The inside corner should be smaller than the outside one: inner radius = outer radius − padding. A 20px outer corner with 8px of padding calls for a 12px inner corner.
Don’t rely on a shadow alone to show state. In Windows High Contrast and other forced-colour modes, shadows are removed. If a shadow marks keyboard focus, add an outline or border as well.
Keep contrast in mind. Faint shadows are decoration. They shouldn’t be the only thing separating two parts of the interface.
Animate with care. Animating a large, blurry shadow on many elements can make a page feel sluggish, especially on phones. A common trick is to put the final shadow on a pseudo-element and fade its opacity instead.
Shadows that are too dark or too big. The effect should be felt more than seen.
A negative blur value. It isn’t allowed, and the whole declaration is ignored.
Forgetting that shadows follow the box. A shadow follows the element’s rectangle and its rounded corners, not the visible shape of a transparent PNG. For that, use the drop-shadow() filter.
Clipped shadows. If a parent has overflow: hidden, it can cut off a child’s shadow. Add padding to the parent or move the overflow rule.
Rounded images that don’t round. Apply border-radius to the image itself, or put overflow: hidden on the container with the radius.
Setting a radius larger than the box allows. The browser scales the corners down so they don’t overlap, so you won’t see the extra curvature.
What’s the difference between blur and spread?
Blur softens the shadow’s edge. Spread makes the whole shadow larger or smaller before it’s blurred. A shadow with spread but no blur is a hard-edged border.
Does box-shadow change the size of my element?
No. It doesn’t take up space or push other elements around, so it can overlap neighbours.
Can I have more than one shadow?
Yes. Separate them with commas. The first one in the list sits on top.
What’s the difference between box-shadow and drop-shadow?
box-shadow follows the element’s rectangular box and its rounded corners. filter: drop-shadow() follows the actual shape of the content, including transparent areas in a PNG or SVG.
How do I make a perfect circle?
Give the element equal width and height, then set border-radius: 50%.
Do I need vendor prefixes?
No. box-shadow and border-radius work unprefixed in all current browsers.
What’s the best unit for border-radius?
Pixels give you a fixed curve, percentages scale with the element, and rem follows the user’s text size. Pick whichever suits the design. Percentages are best for circles and ellipses.
The generated code is a starting point. Always check how it looks in your own design and in different browsers.