Design Layered CSS Box Shadows
Realistic shadows are usually several layers: a tight one for contact and a wide, faint one for depth. Build and toggle up to eight layers and preview them on a box and background you control.
How to create a box shadow
- Start from a preset such as Soft, Elevated or Neumorphic, or adjust the default layer.
- Select a layer in the list and change its x and y offset, blur, spread, colour and opacity.
- Add, duplicate, disable or remove layers to build up depth.
- Change the preview box and background colours to match your design, then copy the CSS.
Benefits
- Multi-layer shadows are formatted one per line for readable stylesheets.
- Colours are written as rgb() with alpha so opacity is easy to tweak later.
- Disabled layers stay in the editor without appearing in the output, handy for comparisons.
Limitations
- Very large blur values on many elements can slow down scrolling on low-end devices; preview performance here doesn't reflect a full page.
- Neumorphic styles have low contrast by nature and may not meet accessibility guidelines for controls.
Privacy and security
Shadows are built from your settings in the page itself. Nothing is uploaded or remembered.
Read our privacy policy for details about the site as a whole.
Frequently asked questions
What is the difference between blur and spread?
Blur softens the shadow's edge; larger values spread it out more faintly. Spread grows (positive) or shrinks (negative) the shadow before blurring. A negative spread with a large y offset gives a shadow that looks like it sits under the element.
Why do multiple layers look better than one?
Real objects cast a sharp, dark shadow close to them and a soft, light one further away. Layering a small, tight shadow with a larger, fainter one imitates that.
Does box-shadow affect layout?
No. Shadows are painted outside the box without taking up space, so they never move neighbouring elements, but they can be clipped by a parent with overflow: hidden.