What is the CSS box-shadow property?

The CSS box-shadow property adds shadow effects around an element's frame. It accepts one or more comma-separated values, each defining horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword for inner shadows.

How do multiple shadow layers work?

CSS allows multiple box-shadows by separating them with commas. The first shadow in the list renders on top. Using 2-3 layers at different distances creates realistic depth — for example a tight sharp shadow plus a softer ambient shadow.

What is an inset shadow?

An inset shadow renders inside the element border rather than outside. It is useful for pressed button states, inner depth effects, and neumorphism designs. Add the "inset" keyword before the shadow values in CSS.

What is the spread radius in box-shadow?

The spread radius is the fourth value in box-shadow. A positive value makes the shadow larger than the element, a negative value contracts it. Setting a large negative spread with high blur creates a soft, focused directional shadow.

Does text-shadow support spread or inset?

No. CSS text-shadow only supports X offset, Y offset, blur radius, and color. It does not have spread or inset. This tool automatically hides those controls when text shadow mode is active.

How do I create a glow effect in CSS?

Set X and Y offsets to 0, increase the blur radius, and use a colored shadow instead of black. Use 2 layers — one tighter and more opaque, one wider and less opaque — for a realistic glow. Use the "Glow" preset in this tool as a starting point.

Free · Browser-only · No sign-up

CSS Shadow Generator

Generate CSS box-shadow and text-shadow code visually. Stack multiple layers, fine-tune offset, blur, spread, opacity, and color with live preview. Instantly copy the CSS output.

Box shadowText shadowMulti-layerPresetsInset support100% offline

X offset0px

Y offset4px

Blur6px

Spread-1px

Opacity20%

Color#000000

Inset shadow

element

css output

box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.2);

Features

Multi-layer shadows

Stack unlimited shadow layers for realistic depth and glow effects

Box & text modes

Supports both box-shadow for elements and text-shadow for typography

Inset shadows

Toggle inset mode per layer to create inner shadow and pressed UI effects

Presets

Start from Soft, Sharp, Glow, Inset, or Lifted presets and customize from there

rgba output

Colors are output as rgba() with the exact opacity you set — no hex opacity hacks

Live preview

Instant visual feedback with customizable background and element colors

How to use

1
Choose mode
Select Box Shadow for elements or Text Shadow for typography at the top.
2
Pick a preset
Start from Soft, Sharp, Glow, Inset, or Lifted — or start fresh from None.
3
Adjust the layer
Use the sliders to set X/Y offset, blur, spread, opacity, and color for the selected layer.
4
Add more layers
Click "+ add" to stack additional shadow layers for depth and glow effects.
5
Copy CSS
Click Copy to grab the box-shadow property and paste it into your stylesheet.

Frequently asked questions

Can I use this for neumorphism designs?

Yes. Neumorphism requires two shadows — one light (top-left) and one dark (bottom-right). Set opposite offsets on two layers with matching low opacity to create a soft extruded look.

How do I create a colored drop shadow?

Change the shadow color from black to any hue using the color picker. Set opacity to around 40-60% and blur to 15-30px for a soft colored glow effect.

Why use opacity instead of a hex color with alpha?

This tool separates color and opacity for easier tuning. It outputs rgba() in the CSS — for example rgba(99, 102, 241, 0.3) — which is the correct CSS format for semi-transparent shadows.

Is there a limit to shadow layers?

CSS has no hard limit on shadow layers, though performance degrades with many layers on frequently repainted elements. For most designs, 2-3 layers are sufficient.

Related tools

Color Palette Generator

Generate color schemes and shades from a base color

Flexbox Playground

Visually build CSS flexbox layouts

CSS Grid Generator

Build and preview CSS grid layouts with code output