CSS Box Shadow Generator
Build a box-shadow visually: stack as many layers as you like, drag the sliders and copy clean CSS. Everything runs in your browser, nothing is uploaded.
Shadow layers
The first layer is drawn on top. Use the arrows to reorder.
Layer 1
How to use the CSS Box Shadow Generator
- Pick a preset such as Soft, Material 8dp or Neumorphism, or start from the default soft shadow.
- Select a layer in the Shadow layers list and adjust its x and y offset, blur, spread, opacity and color.
- Add layers with + Add layer to build realistic depth; use the arrows to reorder and the eye to hide one temporarily.
- Check the preview on a card, circle or button, and change the box and background colors to match your design.
- Press Copy CSS and paste the box-shadow declaration into your stylesheet.
box-shadow values explained
| Value | Required? | What it does |
|---|---|---|
inset | No | Draws the shadow inside the border box instead of outside it. |
| offset-x | Yes | Moves the shadow right (positive) or left (negative). |
| offset-y | Yes | Moves the shadow down (positive) or up (negative). |
| blur-radius | No (0) | Softens the edge. Cannot be negative. 0 gives a hard edge. |
| spread-radius | No (0) | Expands (positive) or contracts (negative) the shadow before blurring. |
| color | No (currentColor) | Any CSS color. Use rgba() or 8-digit hex for transparency. |
Example: box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15); moves the shadow 10px down, blurs it over 30px and pulls it in by 5px on every side, so it shows mostly below the element: the soft "card" look used by many design systems.
Material Design elevation shadows
Material Design (version 2) builds each elevation from three layers: an umbra (20% opacity), a penumbra (14%) and an ambient shadow (12%). These are the values used by the presets:
| Elevation | Typical component | box-shadow |
|---|---|---|
| 2dp | Raised button, card at rest | 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.14), 0 1px 5px rgba(0,0,0,.12) |
| 4dp | App bar | 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px rgba(0,0,0,.14), 0 1px 10px rgba(0,0,0,.12) |
| 8dp | Menu, raised card | 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12) |
| 16dp | Navigation drawer | 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12) |
| 24dp | Dialog | 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12) |
Tips for better-looking shadows
- Light comes from above: keep offset-x near 0 and use a positive offset-y so all shadows on a page agree.
- Layer instead of enlarging: several small shadows that double in offset and blur (1, 2, 4, 8, 16px) look smoother than one big blur. Try the Layered preset.
- Tint the shadow: on colored backgrounds, use a darker shade of the background color instead of pure black for a richer, less muddy result.
- Keep opacity low: most UI shadows sit between 8% and 25% opacity.
- Smooth hover effects: add
transition: box-shadow .2s easeand switch to a higher elevation on:hover. When your stylesheet is done, tidy it with the CSS Formatter or shrink it with the CSS Minifier.
Frequently asked questions
What is the syntax of box-shadow?
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. The two offsets are required; blur defaults to 0 (a sharp edge), spread defaults to 0, and inset turns it into an inner shadow. Separate several shadows with commas.
How do multiple box shadows stack?
The first shadow in the comma-separated list is painted on top and each following one sits underneath it. Layering two to five shadows with growing offset and blur gives a softer, more natural result than a single large shadow.
What is the difference between blur and spread?
Blur softens the edge of the shadow: a larger value makes it more diffuse. Spread grows (positive) or shrinks (negative) the shadow before blurring. A negative spread with a large blur is the classic trick for a soft shadow that only shows below an element.
How do I make a neumorphism (soft UI) shadow?
Give the element the same color as its background, then add two shadows: a darker one offset down and right (for example 9px 9px 16px with a gray-blue color) and a light or white one offset up and left (-9px -9px 16px). The Neumorphism preset does exactly that; add inset for the pressed look.
Does box-shadow affect layout or performance?
No, box-shadow never changes an element's size or position, so it does not move other elements. Very large blurred shadows on many elements, or animating box-shadow, can cost paint time; for hover effects consider animating opacity of a pseudo-element that carries the shadow.
Do I still need the -webkit-box-shadow prefix?
Not for any current browser. Unprefixed box-shadow has worked in Chrome, Firefox, Safari and Edge for over a decade. The -webkit- line is only useful for very old Android and iOS browsers, so it is off by default.
What is the difference between box-shadow and filter: drop-shadow()?
box-shadow follows the element's box (including border-radius) and supports spread and inset. filter: drop-shadow() follows the actual visible pixels, so it hugs transparent PNGs and SVG shapes, but it has no spread or inset and only one shadow per function.