🔲

Box Shadow Generator

Design CSS box shadows visually with a live preview. Copy the code.

Horizontal Offset5px

-5050

Vertical Offset5px

-5050

Blur Radius15px

0100

Spread Radius0px

-5050

Shadow Color

#000000

Opacity0.30

Inset Shadow

Live Preview

Preview Box

CSS Code

box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.3);

Quick Presets

About Box Shadow Generator

Free CSS box shadow generator with an interactive visual editor. Adjust horizontal offset, vertical offset, blur radius, spread radius, color, and opacity using intuitive sliders with a live preview. Add multiple shadow layers for complex effects, toggle inset shadows, and copy the generated CSS code instantly. Essential for front-end developers and designers creating depth, elevation, and neumorphism effects in modern web interfaces.

Frequently Asked Questions

Can I add multiple shadows to one element?▾

Yes. The tool lets you add multiple shadow layers, each with independent settings. Multiple shadows are combined in the generated CSS using comma-separated values, allowing you to create complex depth and lighting effects.

What is an inset shadow?▾

An inset shadow appears inside the element rather than outside, creating a pressed-in or recessed effect. Toggle the inset option to switch between outer shadows (elevation) and inner shadows (depth).

What values control a CSS box shadow?▾

CSS box-shadow takes these values: horizontal offset (positive = right), vertical offset (positive = down), blur radius (higher = softer edge), spread radius (higher = larger shadow), color (usually with transparency), and an optional 'inset' keyword. This tool provides sliders for each value with a live preview.

What is neumorphism and how do I create it?▾

Neumorphism (or soft UI) is a design style that makes elements appear to extrude from or press into the background using subtle shadows. It typically uses two shadows - a light shadow on one side and a dark shadow on the other - on a background that matches the element color. Use this tool's multi-shadow feature with low opacity colors to achieve this effect.

Is this box shadow generator free?▾

Yes, completely free with no signup. Design box shadows visually with sliders, add multiple layers, toggle inset mode, and copy the generated CSS code instantly. Everything runs in your browser.

Related Tools

🌈

CSS Gradient Generator

Create beautiful CSS gradients with a visual editor. Copy the CSS code.

🎯

Color Palette Generator

Generate beautiful color palettes from a base color. Export as CSS or JSON.

🎨

Color Name Finder

Enter any hex color code and instantly get its exact or closest color name. Covers all 16.7 million hex colors using a database of 1,500+ named colors and smart matching.

🎨

Color Contrast Checker

Check WCAG 2.1 color contrast ratios and accessibility compliance for text and backgrounds.

📐

CSS Flexbox Generator

Visual CSS Flexbox playground - configure flex properties and get ready-to-use CSS and Tailwind code.

🔲

CSS Grid Generator

Visual CSS Grid layout builder - configure columns, rows, gaps, and item spans with live preview and code output.

Browse all 139+ free tools