Box Shadow Generator

Design CSS Box-Shadows Visually — and Copy the Code

Stack as many shadow layers as you want, drag the offset / blur / spread sliders, pick a color and opacity, and watch the preview update live. The CSS and the Tailwind arbitrary-value form are both kept in sync — copy whichever your project uses.

Shadow Layer Stack

Real product UIs almost never use a single shadow. Tailwind's shadow-md is two layers; shadow-xl is two layers with different spreads; neumorphism is one bright shadow plus one dark shadow. The layer panel on the left lets you add, remove, reorder, hide, and tweak each layer independently — exactly the way the underlying CSS works.

Inset, Glow, and Neumorphic Looks

Toggle inset on any layer to draw the shadow inside the shape (carved-out look). Crank the blur with a tinted color for a glow. Stack a light shadow plus a dark shadow on a same-colored background and you get the neumorphic look. The built-in presets give you working starting points for all three.

Built-In + Custom Presets

Ship-with presets cover the Tailwind scale (sm / default / md / lg / xl / 2xl), plus a glow, an inset-soft, and a neumorphic. You can save your own to a cf_shadow_presets cookie so they're there on the next visit. Nothing is sent to a server.

Live Preview Across Shapes

Switch between a card, a pill button, and a circle to see how your shadow reads on different geometry. Set the background color and the shape's fill color independently — useful when checking how a shadow looks on a brand-colored hero, not just on a white card.

Privacy: Pure client-side. Nothing leaves your browser.