CSS shadows

box-shadow with live preview

No database: AIMRAN doesn't store your files, text or results

What is CSS shadows?

This generator helps you design shadows for buttons, cards and windows on your site without writing code by hand. Move the sliders and watch the shadow change instantly.

You can combine several layers for more realistic shadows, start from ready-made styles and copy the result as CSS or as a Tailwind class.

How to use it

  1. Pick a starting style: Soft, Raised, Sharp, Layered, Inset or Glow.
  2. Select a layer and adjust X and Y offset, blur, spread, color and opacity.
  3. Add more layers or turn on “Inset”.
  4. Change the corner radius and the light or dark preview background.
  5. Copy the CSS or the Tailwind class.

Advantages

Technical details

It generates the CSS box-shadow property with the syntax [inset] offset-x offset-y blur spread color, in pixels and with the color converted to rgba() based on opacity. Layers are separated by commas and painted in order, the first on top. The Tailwind CSS output uses an arbitrary value shadow-[…] with spaces replaced by underscores. The preview also applies an adjustable border-radius from 0 to 60 px. The presets combine low-opacity contact and ambient shadows, or layers that double in offset and blur for a natural elevation effect.

Frequently asked questions

How do I add a shadow in CSS?

With the box-shadow property, for example box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); which sets the horizontal and vertical offset, blur and color.

What is an inset shadow?

An inner shadow: it's drawn inside the element instead of outside, as if it were pressed in. It's enabled with the inset keyword.

Can an element have multiple shadows?

Yes, by separating them with commas in box-shadow. Combining several soft layers looks more realistic than a single strong shadow.

How do I use the shadow in Tailwind?

Copy the class from the Tailwind section, such as shadow-[0px_4px_12px_0px_rgba(0,0,0,0.04)], and paste it into the element's class attribute.

What's the difference between blur and spread?

Blur softens the edge of the shadow. Spread enlarges or shrinks it before blurring.

More Developers tools