CSS Box Shadow Generator

Design beautiful CSS shadows with a visual editor

DeveloperFREEYour data never leaves your browser

100% freeNo signupRuns in your browser

Built by WOWHOW Team · 14+ yrs engineering

CSS Box Shadow Generator is a free, browser-based tool that lets you design beautiful css shadows with a visual editor — with zero signup, zero installation. Your data never leaves your browser. Part of 138+ free developer and business tools at wowhow.cloud, built and maintained by a team with 14+ years of hands-on development experience.

TOOLCSS Box Shadow Generator

Preview

Your Element

Presets

Horizontal Offset0px

Vertical Offset4px

Blur Radius12px

Spread Radius0px

Color

Opacity15%

Inset shadow

Generated Code

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

shadow-[0px_4px_12px_0px_rgba(0,_0,_0,_0.15)]

About CSS Box Shadow Generator

The CSS box-shadow property, defined in the CSS Backgrounds and Borders Level 3 specification, renders one or more shadow layers behind or inside an element. Each layer is defined by horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. Layering multiple shadows produces the realistic depth effects seen in Material Design, Apple's Human Interface Guidelines, and modern design systems. Getting the values right by trial and error in DevTools is slow — a visual editor with live preview across light, gray, and dark backgrounds collapses that iteration loop.

How It Works

Each shadow layer is represented as a data object with six properties: offsetX, offsetY, blurRadius, spreadRadius, color (in hex with alpha), and inset (boolean). The CSS output assembles these into the comma-separated box-shadow syntax: "X Y blur spread color, X Y blur spread color, ...". Multiple layers are rendered in back-to-front order — the last layer in the list appears behind all others.

The live preview renders the shadow on a white card element placed over three background panels (white, light gray, and dark) so you can verify readability across common interface contexts. Shadow colors rendered over dark backgrounds require higher opacity to remain visible, and the dark preview panel surfaces this issue immediately.

Tailwind arbitrary value output wraps the full box-shadow value in shadow-[...] syntax. Since Tailwind's arbitrary value parser treats commas as argument separators in some contexts, multi-layer shadows are wrapped in underscores and the output includes a usage note.

Who Is This For

A frontend engineer building a card component adjusts blur and spread values in the generator until the shadow matches the design specification from Figma.

A developer creates an inset shadow effect for a pressed button state to simulate physical depth without using images.

A designer generates layered shadows for three elevation levels (low, medium, high) and exports the CSS values to add to the project's design token file.

A developer tests how a card shadow reads over both a white and dark background before finalizing the design system's elevation tokens.

How to Use

Adjust horizontal/vertical offset, blur, and spread using the sliders

Pick a color and opacity for the shadow, toggle inset if needed

Add up to 4 shadow layers for complex effects, or choose a preset

Copy the generated CSS or Tailwind arbitrary value code

Frequently Asked Questions

The box-shadow property takes values for horizontal offset, vertical offset, blur radius, spread radius, and color. You can stack multiple shadows separated by commas.

An inset shadow appears inside the element instead of outside. Add the "inset" keyword before the shadow values to create an inner shadow effect.

Yes. The tool generates Tailwind arbitrary value syntax like shadow-[...] that you can paste directly into your className.

Up to 4 shadow layers. Layering multiple shadows creates depth and realism — for example, a subtle shadow for ground contact plus a larger one for elevation.

Blur radius controls the softness of the shadow edge — a higher value creates a more diffuse shadow. Spread radius expands or contracts the shadow's base size before blurring. A positive spread with zero blur creates a hard border effect; a negative spread with high blur creates a soft shadow that does not extend beyond the element edges.

The generator outputs CSS values in the format Figma expects when you set a custom Drop Shadow effect. Enter the horizontal offset, vertical offset, blur, spread, and color values from the generator output directly into Figma's shadow panel for an exact match.

A two-layer approach works well for realistic elevation: a close, dark shadow (0 2px 4px rgba(0,0,0,0.12)) for the contact shadow, plus a larger, lighter shadow (0 8px 24px rgba(0,0,0,0.08)) for ambient diffusion. The presets in the generator include an Elevation preset that demonstrates this pattern.