CSS
Box
Shadow
Generator

Generate CSS box-shadow values with visual controls, live preview, and one-click copy.

Shadow Layers

Layer 1

H-Offset0px
V-Offset4px
Blur6px
Spread-1px
Opacity20%
Color
Inset

Preview Settings

Box Color
Border Radius8px

Presets

Live Preview

CSS Output

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

Learn more

How do a few numbers create the illusion of depth on a flat screen?

Was this useful?

Related Tools

Design System Generator

Turn two or three brand colors into semantic design tokens with live previews and CSS, Tailwind, SCSS, and JSON exports.

CSS Gradient Generator

Generate CSS gradient code for linear, radial, and conic gradients with live preview, color stops, and preset templates.

Favicon Generator

Generate all favicon sizes from a single image, including ICO, Apple Touch Icon, and PWA icons.

Color Picker

Pick colors visually, sync HEX/RGB/HSL values, and extract dominant palettes from uploaded images.

JSON Formatter

Format and validate JSON quickly with clean output and errors.

Base64 Encode/Decode

Convert plain text to Base64 and back in one panel.

Frequently Asked Questions

A CSS box-shadow consists of horizontal offset, vertical offset, blur radius, spread radius, and color. It can also be set as an inset shadow to appear inside the element.

Yes! You can add multiple shadow layers by separating them with commas in the CSS. Our tool allows you to add up to 5 layers visually.

Yes, the box-shadow property is widely supported in all modern browsers, including Chrome, Firefox, Safari, and Edge.