Skip to content
KuponGuru

Box Shadow Generator

Layered CSS box shadows with a live preview — soft, lifted, sharp or inner — copied as CSS or a Tailwind class.

FreeRuns in your browser

About the Box Shadow Generator

Build box shadows that look like real depth rather than a smudge. Start from a preset, then adjust each layer's offset, blur, spread, color and opacity, add an inner shadow, and preview it on your own card and background colors. Copy the CSS declaration or a Tailwind class when it looks right.

How to use it

  1. 1Pick a preset such as Soft or Lifted.
  2. 2Adjust or add layers, and set the card and background colors.
  3. 3Copy the CSS or the Tailwind class.

Questions

Why use more than one shadow layer?

Real objects cast a tight, darker shadow where they touch a surface and a wide, faint one around them. Two or three layers imitate that, which is why layered shadows look natural where a single large blur looks flat.

What does spread do?

Spread grows or shrinks the shadow before it is blurred. A negative spread with a larger blur keeps a soft shadow from spilling out of the sides of a card.

Is my text uploaded or stored?

No. The tool runs in this browser tab. What you paste is never sent to KuponGuru, and it is gone when you close the tab.

Related tools

NewFree

CSS Gradient Generator

Linear, radial and conic gradients with up to eight color stops, a live preview, and CSS or Tailwind to copy.

DesignUse tool
NewFree

Color Converter

Convert any color between HEX, RGB, HSL, OKLCH, HSV and CMYK — type it the way you have it, copy it the way you need it.

DesignUse tool
NewFree

Color Contrast Checker

Check text and background colors against WCAG AA and AAA, preview them, and get the nearest color that passes.

DesignUse tool

Looking for something else? Browse every tool.