What is a CSS box-shadow?

CSS box-shadow adds shadow effects around an element. The syntax is: box-shadow: offset-x offset-y blur-radius spread-radius color. Multiple shadows can be comma-separated for layered effects.

What is the spread radius?

Spread radius expands or contracts the shadow. Positive values make the shadow larger than the element, negative values make it smaller. A value of 0 keeps the shadow the same size as the element.

How do I create a realistic shadow?

Use multiple layered shadows with increasing blur and offset. Keep shadows subtle (low opacity, 10-30%). Material Design and modern UIs use elevation-based shadow systems with 2-3 shadow layers.

CSS Box Shadow Generator

Create beautiful CSS box shadows with a visual editor. Multiple layers, presets, shapes, and live preview with one-click copy.

Share:𝕏 f in ↗

Live Preview

Background#f3f4f6Box Color#ffffff

Radius12px

Box Shape

Presets

box-shadow: 
    5px 5px 15px 0px rgba(0, 0, 0, 0.25);
border-radius: 12px;

Ctrl+C copy • Ctrl+Z undo • Ctrl+Y redo

Shadow Layers 1

Layer 1

Offset X5px

Offset Y5px

Blur15px

Spread0px

Color#000000

Opacity25%

5px 5px 15px 0px rgba(0, 0, 0, 0.25)

About CSS Box Shadow

The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas.

Syntax: box-shadow: [inset] offset-x offset-y blur spread color

offset-x - Horizontal shadow offset (positive = right)
offset-y - Vertical shadow offset (positive = down)
blur - Shadow blur radius (larger = softer)
spread - Shadow size adjustment (positive = larger)
inset - Makes the shadow inside the element

Pro tip: Layer multiple subtle shadows for a more realistic, natural look. Material Design uses 3 shadow layers for their elevation system.

Frequently Asked Questions

📖 Related Articles

🧠Explainers-6 min read

CSS Box Shadow: The Complete Design Guide

Master CSS box-shadow with practical examples. Subtle cards, neumorphism, layered shadows, glows, and performance tips for modern web design.

Related Tools

🔘

Neumorphism Generator

Create soft UI neumorphism CSS effects with live preview. Adjust size, radius, distance, intensity, blur, and color for stunning soft shadows.

{ }

JSON Formatter

Format, validate, and minify JSON data with syntax highlighting.

🔄

Base64 Encoder / Decoder

Encode text to Base64 or decode Base64 strings back to plain text.

🔍

Regex Tester

Test and debug regular expressions in real-time. Matches highlighted, capture groups, replacements.

📊

CSV to JSON Converter

Convert CSV data to JSON arrays and JSON arrays back to CSV. Custom delimiters supported.

🔀

Text Diff Checker

Compare two texts and see additions, removals, and unchanged lines highlighted side by side.