Box Shadow Generator

The CSS box-shadow property lets you attach one or more drop shadows to any HTML element. Each shadow is positioned relative to the element's border box and rendered behind it, giving depth, focus, and visual hierarchy to cards, buttons, modals, and any block-level element on a page.

Unlike traditional image-based shadows, CSS box shadows are resolution-independent, fully animatable, and require zero extra markup. They respond instantly to hover states, transitions, and media queries, making them indispensable in modern responsive design. This box shadow generator lets you compose multi-layer shadows visually and copy production-ready CSS in one click.

A single box-shadow declaration can carry up to five parameters per layer, plus an optional inset keyword that flips the shadow to the inside of the element — useful for pressed-button effects, input focus rings, and inner-glow treatments. Layers are comma-separated, painted from last to first, so the first layer in the list appears on top.

Understanding how each parameter interacts is essential for producing shadows that look natural rather than harsh. Real-world light sources rarely produce perfectly crisp, uniform shadows; they feather at the edges and shift in intensity based on distance from the surface. The blur and spread parameters give you precise control over this behaviour, while the rgba color notation — including a separate opacity channel — lets you create shadows that blend correctly on any background without hardcoding a semi-transparent flat color.

This generator computes the CSS output using the following formula for each shadow layer. The hex color input is split into its red, green, and blue byte pairs and parsed as base-16 integers to build a proper var(--card-bg) value with a separate opacity control:

The generator converts your hex color picker value into an var(--card-bg) color by slicing the six-digit hex string into three two-character byte pairs and parsing each as a base-16 integer. For example, the hex value #3b82f6 becomes rgba(59, 130, 246, opacity) because:

• 3b in base 16 = 3 × 16 + 11 = 59 (red channel)
• 82 in base 16 = 8 × 16 + 2 = 130 (green channel)
• f6 in base 16 = 15 × 16 + 6 = 246 (blue channel)

Separating the alpha into its own opacity slider (rather than using an 8-digit hex code like #3b82f680) gives you finer live control. You can tweak transparency without switching between color formats, and the output is compatible with every major browser including those that lag behind in CSS Color Level 4 support.

When multiple layers are present, each shadow string is generated independently and then joined with a comma delimiter. The CSS result is a single box-shadow declaration with all layers inline, which the browser renders from first to last — the topmost visible shadow is the first entry in the list.

A single shadow is fine for simple elevation cues, but professional UI kits almost always use two or more layers to mimic how light behaves in the physical world. Tailwind CSS's built-in shadow scale, Google's Material Design elevation system, and Apple's HIG all rely on layered shadows.

The core pattern pairs a large, soft ambient shadow with a small, sharp direct shadow:

• Ambient layer: large blur, slight negative spread, low opacity — simulates diffuse environmental light
• Direct layer: small blur, tighter spread, slightly higher opacity — simulates the key light source

This two-layer approach is why the generator's default state ships with two shadow entries. You can add up to five layers to produce very deep or stylised effects such as long flat shadows, coloured glow rings, or stacked-paper depth.

The inset checkbox switches a layer to an inner shadow, rendered on the inside face of the border box. Inner shadows are ideal for sunken inputs, pressed-state buttons, and inner glow effects. You can freely mix inset and outer layers in the same declaration; the browser renders each according to its own keyword.

Negative spread values are also worth noting: they shrink the shadow smaller than the element itself, which prevents the shadow from peeking out on sides where no light would realistically fall. This is the technique behind the Medium and Large presets in this generator.

The generator ships four named presets that cover the most common UI needs. Each preset is a direct translation of widely-used design system values:

Beyond these presets, common creative applications include colored glow effects (set the shadow color to a vibrant hue and increase blur), neumorphic design (pair one light-colored shadow at negative offsets with one dark-colored shadow at positive offsets), and long flat shadows (stack many layers at incremental 1px offset steps with zero blur). The box shadow generator handles all of these patterns through the same five parameters per layer.

The generator produces two ready-to-use code snippets. The primary output is a standard CSS property declaration compatible with all modern browsers and IE 9+:

box-shadow: <layer1>, <layer2>, ...;

The secondary output formats the first shadow layer as a Tailwind CSS arbitrary value using the shadow-[...] syntax, replacing spaces with underscores as required by Tailwind's JIT parser. Note that Tailwind arbitrary shadows only accommodate a single layer natively; for multi-layer effects you need either a custom theme extension in tailwind.config.js or an inline style attribute.

When pasting the CSS output, place the box-shadow property inside the selector that targets your element. For hover or focus variants in plain CSS, duplicate the property inside a :hover or :focus block and pair it with a transition: box-shadow 0.2s ease; declaration on the base element for smooth animation.