quialo.

Box Shadow Generator

Preview
Preview

Shadow layers

Layer 1

CSS

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);

Design a CSS box shadow and see it update live on both light and dark backgrounds. Drag sliders for offset, blur, and spread, set the color and opacity, toggle inset, and stack as many shadow layers as you want. Everything runs in your browser, so nothing is uploaded.

How to use

  1. Set the horizontal and vertical offset for the shadow.
  2. Adjust blur and spread to soften or grow the shadow.
  3. Pick a color and set the opacity, and toggle inset if you want an inner shadow.
  4. Add more layers to build a layered, realistic shadow.
  5. Click Copy CSS to grab the box-shadow rule for your stylesheet.

Examples

  • A soft card shadow: box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
  • A layered elevation: box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  • An inner shadow: box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.3);

FAQs

What do offset, blur, and spread mean?
Offset moves the shadow horizontally and vertically. Blur softens the edge, with larger values fading it out more. Spread grows or shrinks the shadow before the blur is applied. A negative spread pulls the shadow in.
Can I add more than one shadow?
Yes. Use Add layer to stack shadows. CSS draws them in order, first on top, which is how realistic, layered elevation shadows are built. Each layer has its own controls.
What does the inset toggle do?
Inset draws the shadow inside the box instead of outside it, which is useful for pressed buttons, wells, and inner highlights.
How is the shadow color set?
Pick a color with the swatch or type a hex value, then use the opacity slider. The tool outputs the color as rgba so the opacity is included in the rule.
Is my work sent anywhere?
No. The preview and the CSS are generated locally in your browser. Nothing is uploaded or stored.

Related tools