Box Shadow

Multi-layer shadows with live drag-to-offset preview

box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);

About this tool

What controls does the box shadow designer give me?
Horizontal offset, vertical offset, blur radius, spread radius, color (with opacity), inset toggle, and a multi-layer shadow stack. Each layer can be toggled on/off individually.
Can I create layered box shadows?
Yes. Click 'Add layer' to stack multiple shadow layers. Layered shadows are the technique behind soft neumorphic effects and Material Design elevation.
Does it generate inset shadows?
Yes. Toggle the Inset switch to create inner shadows for pressed-state buttons, embossed text fields, or sunken card effects.
Is the output valid CSS?
Yes. The output is a ready-to-paste CSS box-shadow declaration, including the comma-separated multi-layer form when applicable.
About

Stack up to 6 shadow layers for realistic depth. Drag inside the preview to set the active layer's X/Y offset directly.

Tip: a tight dark layer plus a soft loose one is what makes UI shadows look real. Use the SCSS export to drop the result into a design system as a mixin.

Related tools

Border Radius

Visualize and generate CSS border-radius values.

◱

Border Radius

Visualize and generate CSS border-radius values.

Open →

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

⬡

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

Open →

Color Palette

Generate harmonious color palettes with multiple harmony rules.

🎨

Color Palette

Generate harmonious color palettes with multiple harmony rules.

Open →

Contrast Checker

Check WCAG contrast ratios for accessibility compliance.

◐

Contrast Checker

Check WCAG contrast ratios for accessibility compliance.

Open →
View all tools →