CSS Box Shadow Generator
A free online CSS shadow generator. Adjust offset, blur, spread, color, opacity and inset with sliders and a live preview, then copy the finished box-shadow declaration.
What the box-shadow property does
box-shadow draws one or more shadows around an element’s box, or inside it with inset. It is defined in CSS Backgrounds and Borders Level 3 (MDN: box-shadow). Shadows follow border-radius and take up no space in the layout, so adding one never moves neighbouring elements. This generator builds a single shadow with sliders and a live preview, then writes the declaration for you.
How to use the generator
- Drag Offset X and Offset Y to move the shadow. Positive values move it right and down.
- Raise Blur to soften the edge, and use Spread to grow or shrink the shadow.
- Pick a Color and set its Opacity. Tick Inset to draw the shadow inside the box.
- Click Copy CSS, or use the copy icon on the CSS box, and paste the line into your stylesheet.
The default settings produce box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);. Ticking Inset puts inset at the front of the value.
Options explained
| Control | Range here | Effect |
|---|---|---|
| Offset X / Offset Y | −50 to 50 px | Horizontal and vertical position. Negative values move the shadow left and up; 0 and 0 centre it behind the box. |
| Blur | 0 to 100 px | 0 gives a hard edge. The specification models blur as a Gaussian blur with a standard deviation of half the blur radius, so a 20 px blur fades over about 20 px, centred on the shadow’s edge. |
| Spread | −50 to 50 px | Grows (positive) or shrinks (negative) the shadow shape before it is blurred. A negative spread with a larger Y offset keeps the shadow mostly below the box. |
| Color + Opacity | Any colour, 0–100% | Combined into rgba(), with the opacity written as a decimal: 25% becomes 0.25, 100% becomes 1.00. |
| Inset | On / off | Draws the shadow inside the padding box, for pressed buttons, wells and input fields. |
Syntax
box-shadow: [inset] <offset-x> <offset-y> [<blur> [<spread>]] [<color>];
box-shadow: <shadow>, <shadow>, …;
box-shadow: none;Blur and spread are optional and default to 0; the colour defaults to currentColor. The colour and inset may also appear before or after the lengths: Chromium accepts rgba(0,0,0,.2) 0 4px 8px inset and reports it back in its normalised order. Blur cannot be negative — CSS.supports('box-shadow', '0 0 -2px red') returns false, and the browser ignores the whole declaration.
Recipes for realistic shadows
Real shadows are soft and subtle. Layering two or three lighter shadows, separated by commas, usually looks more natural than one dark, heavily blurred one. All of these were checked in Chromium:
/* Subtle card */
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
/* Raised element, such as a dropdown or modal */
box-shadow: 0 4px 6px -2px rgba(16, 24, 40, 0.05), 0 12px 16px -4px rgba(16, 24, 40, 0.10);
/* Focus ring that follows border-radius */
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.4);
/* Flat "offset" look with no blur */
box-shadow: 10px 10px 0 0 #111827;- Keep one light source: if shadows fall downward on one component, they should fall downward on all of them.
- Tint shadows with a dark version of the background colour instead of pure black for a cleaner result.
- On dark backgrounds shadows barely show; use lighter surfaces or borders to suggest elevation.
Common problems and fixes
| Symptom | Cause | Fix |
|---|---|---|
| The shadow is cut off | A parent has overflow: hidden (or auto), which clips anything outside it. | Add padding to the parent, or move the overflow rule to an inner element. |
| The shadow does not show through a transparent box | Outer shadows are drawn only outside the border box, never underneath it. | Give the box a background, or use filter: drop-shadow(). |
| The whole declaration is ignored | A negative blur, a missing comma between shadows, or a typo invalidates it. | Check the value in your browser’s developer tools, which flag invalid properties. |
| The shadow is invisible | Opacity is 0, the offsets and blur are 0, or the colour matches the background. | Raise Opacity and Blur, or choose a darker colour. |
Frequently asked questions
What is the difference between box-shadow and filter: drop-shadow()?
box-shadow follows the element’s box and its border-radius. filter: drop-shadow() follows the visible pixels, including the shape of transparent PNGs and SVG icons, but has no spread value or inset option.
Can I combine multiple shadows?
Yes. Separate them with commas; the first shadow is drawn on top. The generator makes one shadow, so copy it and add further shadows by hand.
Does a shadow change the size of the element?
No. Shadows are only painted: they do not affect layout or enlarge the scrollable area, although an ancestor’s overflow can still clip them.
Do shadows hurt performance?
Static shadows are usually cheap. Animating a large blur repaints on every frame; for hover effects, a common technique is to put the shadow on a pseudo-element and animate its opacity instead.
Is my design sent anywhere?
No. The preview and the CSS are generated by JavaScript in your browser.