How CSS Box Shadow Works

The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A standard box-shadow consists of the following parameters:

H-offset (X): Horizontal offset. Positive values move it right, negative values left.
V-offset (Y): Vertical offset. Positive values move it down, negative values up.
Blur Radius: How blurred the shadow is. Higher values mean more blur; 0 means sharp.
Spread Radius: The size of the shadow. Positive values expand it, negative values shrink it.
Color: The color of the shadow, usually defined with RGBA for transparency.
Inset: Optional keyword to change the shadow to one that is inside the frame.

Design Styles & Use Cases

1. Hover Effects

By increasing the Y-offset and Blur radius, you simulate an object being "lifted" up, commonly used for button or card hover states.

2. Neumorphism

Combines a light shadow and a dark shadow (one top-left, one bottom-right) to create a soft extruded plastic look.

3. Soft Shadows

Uses multiple layeres of low-opacity shadows to create extremely smooth, natural depth often found in modern styles like Stripe or Apple design.

4. Inner Glow

Uses the inset keyword. Great for input focus states or pressed button effects.

FAQ

How to create "natural" smooth shadows?

Natural shadows are usually made of multiple layers. Add 2-3 layers of shadows, each with increasing blur and decreasing opacity, to simulate real light decay.

Does Box Shadow affect performance?

Large shadows or high blur radii can be expensive to render, especially on mobile. If scrolling feels laggy, reduce the number of layers or blur radius.

What is Inset shadow used for?

Inset renders the shadow inside the element. It's often used for form inputs (adding depth), pressed button states, or picture frame effects.

Why do my shadows look "dirty"?

Using pure black (#000000) with low opacity can look dirty. Try using a very dark blue or purple as the shadow color for a richer, more natural look.

Can Spread radius be negative?

Yes. A negative spread shrinks the shadow. Combined with a large blur, it can create a unique "floating" effect where the shadow looks detached from the edges.

What color formats are supported?

All CSS color formats including Hex, RGB, RGBA, HSL, HSLA. For shadows, RGBA or HSLA are most common to control transparency.

Does Box Shadow take up layout space?

No. Box shadows are painted outside the border edge and do not affect the document flow (layout) or increase the element's size.

Browser compatibility?

Modern browsers (Chrome, Firefox, Safari, Edge) fully support box-shadow. Prefixes are generally no longer needed.

More Free Tools

Glassmorphism Gen

Visual generator for CSS Glassmorphism effects (Blur, Transparency, Shadow). Copy CSS instantly.

CSS Gradient Generator

Create linear/radial gradients visually. Adjustable color stops and angles with instant CSS export.

Color Converter

Convert between HEX, RGB, HSL, and CMYK formats with real-time preview.

Image Color Extractor

Extract dominant colors from images or pick any color with the eyedropper.

PX REM Converter

Bidirectional conversion between PX and REM. Customizable root font size and quick reference table.

SVG/PNG Converter

Convert SVG to high-res PNG or PNG to SVG (pixelated/embedded). 100% Client-side.

CSS Box Shadow Generator

Shadow Layers