Box Shadow Generator

Create CSS box shadows visually with live preview. Adjust offset, blur, spread, and color to design perfect shadows.

100% client-side No signup Free forever

Shadow 1

X Offset 5px

Y Offset 5px

Blur 15px

Spread 0px

Color

Opacity 25%

Inset

Box Settings

Background

Border Radius 8px

CSS Code

Preset Shadows

// how to use

How to Use Box Shadow Generator

How to Create Box Shadows

Adjust offsets: Use sliders to set horizontal and vertical offset.
Set blur: Increase blur radius for softer shadows.
Set spread: Adjust spread to make the shadow larger or smaller.
Pick color: Choose shadow color and opacity.
Toggle inset: Check inset for inner shadows.
Add layers: Click "Add Shadow" for multiple shadows.
Copy CSS: Copy the generated code to use in your project.

// features

Features

Visual shadow editor
Adjustable offset, blur, spread
Color picker with opacity
Inset shadow option
Multiple shadow layers
Real-time preview
One-click CSS copy
Preset shadow styles
Live preview box
Mobile-friendly controls

// about

About Box Shadow Generator

CSS box shadows add depth and dimension to web elements, but getting the right shadow values by trial and error is tedious. Our visual generator lets you see your shadow in real-time as you adjust each property, then copy the perfect CSS code.

Shadow Properties Explained

Box shadows are controlled by several values:

Horizontal offset: Shadow position left/right (positive = right)
Vertical offset: Shadow position up/down (positive = down)
Blur radius: How soft or sharp the shadow edge appears
Spread radius: Expands or contracts the shadow size
Color: Shadow color including opacity (use rgba for transparency)

Creating Effective Shadows

Realistic shadows come from understanding light sources. A light above and to the left creates shadows below and to the right. Subtle shadows (small offset, larger blur, low opacity) look more natural than hard shadows. Multiple shadows can create layered depth effects.

Design Pattern Examples

Material Design elevation: Multiple soft shadows at different distances. Button hover: Increase shadow on hover to show "lifting." Card depth: Subtle shadow to separate content from background. Inset shadows: Create pressed or recessed appearances.

Browser Compatibility

The box-shadow property is supported in all modern browsers. No vendor prefixes needed. The generated CSS works across Chrome, Firefox, Safari, and Edge.

// faq

Frequently Asked Questions

What are the CSS box-shadow properties?

Box-shadow has 5 values: horizontal offset, vertical offset, blur radius, spread radius, and color. "box-shadow: 10px 10px 20px 5px rgba(0,0,0,0.5)" means 10px right, 10px down, 20px blur, 5px spread, 50% transparent black. Our visual editor adjusts each intuitively.

How do I create an inner shadow?

Add the "inset" keyword: "box-shadow: inset 0 0 10px black". Inner shadows appear inside the element, creating pressed-button or input field effects. Our generator includes an inset toggle with preview. You can combine inset and outset shadows.

Can I have multiple shadows on one element?

Yes! Separate multiple shadows with commas. This creates depth, colored glows, or complex effects. "box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08)" creates layered shadows common in Material Design. Our tool manages multiple shadow layers.

What is the difference between blur and spread?

Blur softens the shadow edges (higher = softer). Spread expands or contracts the shadow size (positive = larger, negative = smaller). Blur of 20px with spread of 0 looks different from blur of 10px with spread of 10px, even if similar overall size.

How do I create a shadow that looks natural?

Natural shadows: use subtle offset (light source direction), low blur (sharper near object), transparent black color (rgba), and possibly multiple layers. Avoid solid black, large offsets, or excessive blur. Our presets include natural shadow styles.

What about text shadows?

Text-shadow has similar syntax but no spread value: "text-shadow: 2px 2px 4px black". Use for heading effects, letterpress looks, or improving readability over images. Our text-shadow mode generates appropriate CSS for text elements.