CSS Shadow Gallery
36 shadows. Copy one, or open it in the generator to fine-tune every layer.
Lift 1
0 0 0 0 rgb(15 23 42 / 0.06), 0 0 1px 0 rgb(15 23 42 / 0.06), 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 2px 5px 0 rgb(15 23 42 / 0.06), 0 3px 8px 0 rgb(15 23 42 / 0.06)Lift 2
0 0 1px 0 rgb(15 23 42 / 0.06), 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 3px 7px 0 rgb(15 23 42 / 0.06), 0 5px 12px 0 rgb(15 23 42 / 0.06), 0 8px 19px 0 rgb(15 23 42 / 0.06)Lift 3
0 1px 1px 0 rgb(15 23 42 / 0.06), 0 2px 5px 0 rgb(15 23 42 / 0.06), 0 5px 12px 0 rgb(15 23 42 / 0.06), 0 9px 22px 0 rgb(15 23 42 / 0.06), 0 14px 34px 0 rgb(15 23 42 / 0.06)Lift 4
0 1px 2px 0 rgb(15 23 42 / 0.06), 0 3px 8px 0 rgb(15 23 42 / 0.06), 0 8px 19px 0 rgb(15 23 42 / 0.06), 0 13px 34px 0 rgb(15 23 42 / 0.06), 0 21px 53px 0 rgb(15 23 42 / 0.06)Lift 5
0 1px 3px 0 rgb(15 23 42 / 0.06), 0 5px 13px 0 rgb(15 23 42 / 0.06), 0 12px 30px 0 rgb(15 23 42 / 0.06), 0 21px 53px 0 rgb(15 23 42 / 0.06), 0 33px 83px 0 rgb(15 23 42 / 0.06)Stacked
0 1px 2px 0 rgb(15 23 42 / 0.06), 0 2px 4px 0 rgb(15 23 42 / 0.06), 0 4px 8px 0 rgb(15 23 42 / 0.06), 0 8px 16px 0 rgb(15 23 42 / 0.06), 0 16px 32px 0 rgb(15 23 42 / 0.06)Long cast
4px 4px 8px 0 rgb(15 23 42 / 0.08), 12px 12px 24px 0 rgb(15 23 42 / 0.08), 28px 28px 56px 0 rgb(15 23 42 / 0.08)Soft UI pressed
inset 6px 6px 12px 0 rgb(163 177 198 / 0.7), inset -6px -6px 12px 0 rgb(255 255 255)Download the pack
Every shadow shown above, named and ready to drop into a stylesheet.
CSS variables shadow pack
Choosing a shadow for the job
Soft and elevation shadows suit cards, menus and dialogs, where depth should signal hierarchy without drawing attention. Sharp, unblurred shadows give a flat, printed or retro look and work well for buttons and badges. Glows are best on dark backgrounds, where a colored shadow reads as light rather than dirt.
Use a small number of steps consistently. A design that uses three shadow levels, each with a clear meaning, reads better than one where every component has its own.
Neumorphic and inset shadows
Neumorphic shadows pair a dark shadow with a light highlight on the opposite side, and only work when the element and the page share the same background color. That is why those examples carry their own stage. Their low contrast makes them a poor choice for controls that must be recognised as interactive.
Inset shadows are drawn inside the element. They suit pressed buttons, input wells and subtle vignettes, and they can be combined with outer layers in the same declaration.
Using the downloadable pack
The pack contains every shadow currently shown, so filter first if you only want one style. Each shadow is named after its example, as a custom property, a class, a Tailwind v4 theme token or an SCSS variable with a map of all of them.
The light and dark background switch changes the preview and the colors carried into the generator. It does not change the shadow values themselves.
Frequently asked questions
Yes. The examples are original to this gallery and are plain CSS values; copy and adapt them freely.