Box Shadow Generator

Craft CSS box-shadow effects visually and copy the code.

What Does the Box Shadow Generator Do?

This generator builds CSS box-shadow effects visually. Drag five sliders — horizontal offset, vertical offset, blur radius, spread and opacity — pick the shadow and box colors, optionally flip to an inset (inner) shadow, and watch the preview update live. The exact CSS appears below, ready to copy, with the color expressed as an rgba() value so the opacity you chose travels with it.

How to Design a Shadow

  1. Adjust the offset sliders — positive Y pushes the shadow down, mimicking overhead light.
  2. Add blur for softness and spread to grow or shrink the shadow.
  3. Lower the opacity — realistic shadows are subtle (10–30%).
  4. Copy the one-line CSS and paste it onto your element.

Shadow Recipes That Work

  • Subtle card — 0 1px 3px rgba(0,0,0,.12): barely-there elevation for list items and inputs.
  • Floating card — 0 10px 30px rgba(0,0,0,.15): the modern "lifted" look for modals and popovers.
  • Pressed button — inset with small offsets: makes an element look pushed into the page.
  • Glow — zero offsets, generous blur, a colored shadow: focus rings and neon effects.
  • Layered realism — combine two shadows (comma-separated): one tight and dark, one large and faint — how design systems like Material create depth.

Shadows communicate hierarchy: the bigger and softer the shadow, the "closer" the element feels. Keep direction consistent across a page — one light source, usually from above.

Frequently Asked Questions

What do the four numbers in box-shadow mean?

In order: horizontal offset, vertical offset, blur radius, spread. E.g. 0 10px 30px -5px — no sideways shift, 10px down, 30px of softness, shrunk 5px. The color (usually rgba for transparency) follows.

What is the difference between blur and spread?

Blur softens the shadow's edge without changing its size; spread grows (positive) or shrinks (negative) the shadow before blurring. Negative spread with high blur creates tight, realistic shadows.

What does inset do?

It draws the shadow inside the element's edges instead of behind it — used for pressed buttons, wells, and inner highlights.

Do box shadows hurt performance?

Static shadows are cheap. Animating a shadow repaints on every frame, though — for hover transitions, animating opacity on a pseudo-element with a pre-rendered shadow is smoother.