Design CSS box-shadows visually and copy the code.
Tip: use samples, upload, copy, download, and send-to actions inside the workspace where available.
CSS Box Shadow Generator is a free, browser-based tool that helps you produce ready-to-use output in seconds. Design CSS box-shadows visually and copy the code. It's built for speed and privacy: Everything runs locally in your browser — your data is never uploaded to a server. No sign-up, no installs, and no daily limits.
Generate a sample or helper artifact, then copy it into the workflow that needs it.
Review the preview, copy or download the result, and keep everything local in your browser.
CSS Gradient Generator: Build linear and radial CSS gradients with a live preview.
Open toolShadows the element's border box. Supports spread and inset.
0px 10px 25px -5px rgba(109, 40, 217, 0.35)0px 4px 6px -4px rgba(0, 0, 0, 0.2).card {
box-shadow: 0px 10px 25px -5px rgba(109, 40, 217, 0.35), 0px 4px 6px -4px rgba(0, 0, 0, 0.2);
}box-shadow: 0px 10px 25px -5px rgba(109, 40, 217, 0.35), 0px 4px 6px -4px rgba(0, 0, 0, 0.2);shadow-[0px_10px_25px_-5px_rgba(109,40,217,0.35),0px_4px_6px_-4px_rgba(0,0,0,0.2)]Underscores stand in for spaces — Tailwind converts them back. Arbitrary values must appear literally in your source for the compiler to find them; a value built by string concatenation at runtime will not be generated.
--shadow: 0px 10px 25px -5px rgba(109, 40, 217, 0.35), 0px 4px 6px -4px rgba(0, 0, 0, 0.2);Stack two layers, not one. Real objects cast a tight, dark contact shadow plus a wide, faint ambient one. A single large blurred shadow reads as a sticker; the elevation presets above all use two layers for exactly this reason.
Negative spread keeps the shadow under the element. As blur grows the shadow spills sideways; pulling spread negative shrinks it back so it stays beneath, which is what makes a card look lifted rather than glowing.
Order is top-down. The first shadow in the list paints closest to the viewer, so put the tight contact shadow first and the diffuse one after it.
box-shadow vs drop-shadow. box-shadow always traces the rectangular border box, so a transparent PNG or a clip-path shape casts a box-shaped shadow. filter: drop-shadow follows the actual alpha silhouette — at the cost of no spread, no inset, and a new compositing layer.
Animate with care. Transitioning box-shadow repaints every frame. Where it matters, put the shadow on a pseudo-element and animate its opacity instead.