Box shadow generator
Build a layered box-shadow the way real interfaces use it, a tight edge under a wide soft lift, then copy it as CSS, a Tailwind class or a theme token.
shadow.csscss
.card {
box-shadow: 0px 1px 2px 0px #0f172a1f,
0px 12px 24px -6px #0f172a26;
}
Questions
Why two layers instead of one?+
A single shadow either hugs the edge or spreads far, never both, so it reads as a sticker. Real light gives you a short, dark contact shadow plus a wide, faint ambient one. That pair is what the two rows here build.
What is a negative spread for?+
It shrinks the shadow before it is blurred, which keeps a large blur from leaking out past the sides of the box. It is what makes the far layer read as depth rather than as a grey halo.
Should I use the class or the theme token?+
The class for a one-off, the token for anything repeated. A --shadow-* entry in @theme gives you a named utility, so every card sharing that elevation changes together instead of drifting apart.
Related tools
CSS gradient generatorBuild a linear, radial or conic gradient by dragging its stops, then copy it as plain CSS, as a Tailwind arbitrary value, or as a theme variable.Tailwind color scale generatorTurn one hex color into a full 50 to 950 Tailwind scale in OKLCH, with the @theme block and the shadcn tokens ready to paste.Border radius generatorSet each corner on its own, read the shorthand as it collapses, and copy it as CSS, a Tailwind arbitrary value or a theme token.