Set offset, blur, spread, color, and inset. Copy the box-shadow CSS or a Tailwind shadow class.
box-shadow: 0px 20px 207px 10px rgba(165, 39, 255, 0.48);This tool builds a single box-shadow from five values: horizontal offset, vertical offset, blur, spread and color, plus an inset switch. You can preview it on a dark or light tile and copy it as a CSS declaration or a Tailwind CSS v4 class. Below the generator is a set of gradient glow cards, which use a different technique. The notes here explain what each value does, how to stack shadows, and where shadows fall short.
The output follows the order of the box-shadow syntax: optional inset, x offset, y offset, blur radius, spread radius, then color. The tool's default, 0px 20px 207px 10px rgba(165, 39, 255, 0.48), is a wide violet glow pushed slightly downward.
The CSS tab returns one box-shadow declaration. The Tailwind tab returns a shadow-[…] arbitrary value with underscores in place of spaces, since class names cannot contain spaces. Randomize picks new offsets, blur, spread and color; the reset button returns to the default.
In Tailwind v4, an arbitrary shadow writes its color as a fallback inside var(--tw-shadow-color, …). That means a color utility such as shadow-violet-500/50 on the same element replaces the color while keeping your offsets and blur, and ring utilities still combine with it because Tailwind composes rings and shadows into one box-shadow.
<!-- CSS tab -->
<style>
.card { box-shadow: 0px 20px 60px -10px rgba(165, 39, 255, 0.48); }
</style>
<!-- Tailwind tab, recolored with a shadow color utility -->
<div class="rounded-2xl bg-zinc-900 shadow-[0px_20px_60px_-10px_rgba(165,39,255,0.48)] shadow-sky-500/40">
...
</div>This tool makes one shadow. To stack several, join box-shadow values with commas in CSS, or inside the brackets of the Tailwind class. Layering is how most realistic elevation is built: a small, tight, darker shadow anchors the element to the surface, and a larger, softer, lighter one suggests height. Generate each layer here, then combine them. The first shadow in the list is drawn on top.
.card {
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.10),
0 8px 24px rgba(15, 23, 42, 0.12);
}
/* Tailwind v4 */
/* shadow-[0_1px_2px_rgba(15,23,42,0.10),0_8px_24px_rgba(15,23,42,0.12)] */The glow examples below the generator are not box-shadow. A box-shadow has a single color, so a multicolor glow needs a separate element: a gradient layer positioned slightly outside the card (absolute -inset-2), blurred with blur-2xl (40px in Tailwind v4) and set to half opacity, with the card placed on top. Each example copies as Tailwind JSX.
Keep the outer wrapper relative so the glow stays attached to the card, and keep the card itself relative so it paints above the glow. The glow extends past the card, so a parent with overflow-hidden will cut it off.
<div className="relative">
<div className="absolute -inset-2 rounded-lg bg-linear-to-r from-fuchsia-500 to-cyan-400 opacity-50 blur-2xl" />
<div className="relative rounded-lg border border-zinc-700 bg-zinc-900 p-8 text-slate-300">
Card content
</div>
</div>Shadows almost disappear on dark backgrounds, which is why the preview has a Light and Dark switch. On dark interfaces, a faint light border or ring, or a colored glow, usually communicates depth better than a black shadow.
Do not rely on a shadow alone to show where a button or input is, or which element has focus. WCAG 2.1 asks for 3:1 contrast for the visual boundaries people need to identify a control, and in Windows High Contrast and other forced colors modes browsers drop box-shadow entirely. Use a border or an outline for anything functional and keep the shadow decorative.
Very large blur radii cost more to paint, and animating box-shadow repaints it on every frame. For a hover lift, put the larger shadow on a ::after pseudo-element and transition its opacity instead. Shadows also do not take up space in the layout and are clipped by any ancestor with overflow hidden, which is the usual reason a shadow appears cut off.
Updated