Skip to content
Musterli

CSS Shadow Generator

Soft, layered shadows for cards and buttons. Real CSS preview, export as box-shadow, Tailwind or drop-shadow.

Open the generator

Runs right in your browser. Your graphics are made on your device.

Example motif made with the CSS Shadow Generator

Start from a preset

Pick a preset and it opens right in the editor, ready to adjust.

What is it?

A CSS shadow generator writes the code for box-shadow. Instead of one hard shadow, Musterli stacks several layers whose distance and blur grow along a curve. Cards and buttons look soft and naturally lit.

How it works

Set layers, distance, blur and light direction, or press Space for a new variant. The preview is real CSS on a Musterli background. Then copy the box-shadow, the Tailwind class, the @theme variable or the drop-shadow version.

Try the CSS Shadow Generator now

FAQ

Why several shadow layers?
A real shadow is dark and sharp close to the object and gets lighter and softer further away. Several layers recreate that, while a single box-shadow often looks flat or muddy.
How do I use the shadow in Tailwind?
For Tailwind v3 and v4 there is the class shadow-[...] with all layers. In Tailwind v4 you can also store the shadow as a --shadow-name variable in @theme and simply write shadow-name.
What is the difference to drop-shadow?
box-shadow follows the element's rectangle, filter: drop-shadow() follows its shape, for example of a cut-out PNG or SVG. drop-shadow has no spread and no inner shadow.
Why is the shadow not black?
Shadows pick up some of the color around them. That is why Musterli darkens the hue of the background by default. You can still pick your own color.

Related generators

All generators in CSS effects and layouts

  • Bento Grid

    Rounded tiles of different sizes in a grid, without gaps. For feature sections, portfolios and social graphics, as CSS Grid, Tailwind or an image.

    Open in editor