How do I use the CSS Box Shadow Generator?

Adjust the horizontal and vertical offset sliders to position your shadow. Use the blur slider to control how soft or sharp the shadow edge appears. Change the spread value to expand or shrink the shadow size. Pick a shadow color and adjust opacity for subtle or dramatic effects. Toggle the inset checkbox to create inner shadows instead of outer ones. Copy the CSS code and use it in your project.

Is the CSS Box Shadow Generator free?

Yes, the CSS Box Shadow Generator is completely free. It runs entirely in your browser with no signup, no download, and no data sent to any server.

🖼️

dev

CSS Box Shadow Generator

Design perfect CSS box-shadow effects with a visual editor. Adjust offset, blur, spread, color, and inset to create shadows and copy ready-to-use CSS.

box shadowcss shadowshadow generatorcss box-shadowdrop shadowweb designcss effects

Horizontal offset: 5px Vertical offset: 5px Blur radius: 15px Spread radius: 0px

Shadow color Opacity: 20%

Inset shadow

Box color Background

Border radius: 16px

Preview

CSS Code

How to use

Design Perfect CSS Box Shadows Visually

1 Adjust the horizontal and vertical offset sliders to position your shadow.
2 Use the blur slider to control how soft or sharp the shadow edge appears.
3 Change the spread value to expand or shrink the shadow size.
4 Pick a shadow color and adjust opacity for subtle or dramatic effects.
5 Toggle the inset checkbox to create inner shadows instead of outer ones.
6 Copy the CSS code and use it in your project.

Box shadows are one of the most used CSS properties for creating depth and layering in web interfaces. Getting the perfect shadow usually requires trial and error. This visual editor lets you see changes in real time so you can nail the exact look you want.

You can layer multiple shadows by generating each one separately and combining the CSS values. The tool supports both outer and inset shadows which are useful for pressed button effects and card depth.

More Dev tools

🔎 Regex Tester 🎨 CSS Gradient Generator 🔍 JSON Schema Validator 🔤 Font Pairing Generator 🌐 Favicon Generator 🔀 Flowchart Maker 📖 Regex Cheat Sheet 📚 Git Cheat Sheet View all 17 →

Related tools

🔎

dev

Regex Tester

Test regex patterns with live match highlighting, capture groups, flags, and reusable developer snippets.

regex tester

Use Tool →

🎨

dev

CSS Gradient Generator

Create beautiful CSS gradients with a visual editor. Choose linear or radial gradients, pick colors, adjust angles, and copy the CSS code instantly.

css gradient

Use Tool →

🔍

dev

JSON Schema Validator

Validate JSON data against a JSON Schema. Check types, required fields, patterns, min/max constraints, and nested objects with detailed error messages.

json schema

Use Tool →

📊

converter