🔲

Box Shadow Generator

Create CSS box shadows visually with our free generator. Adjust blur, spread, color, and offset. Copy code with one click.

Horizontal Offset: px

Vertical Offset: px

Blur Radius: px

Spread Radius: px

Shadow Color

Opacity: %

Inset

CSS Code

× px

Theme

Color

Background

Border

Border Color

Border Radius

Show FreeWebTools branding Allow Fullscreen Compact mode Enable animations Transparent background

Preview

Rate this tool

✓

No more tools to show

ℹ️ About Box Shadow Generator

Design CSS box shadows with a visual editor. Adjust blur, spread, offset, and color. Preview in real-time and copy the CSS code for your project.

Adding depth to cards and containers

Creating button hover effects

Designing modern UI elements

Making elements pop from backgrounds

Experimenting with shadow styles

Adjust horizontal and vertical offset

Set blur radius and spread

Choose shadow color and opacity

Copy the generated CSS code

Spread expands or contracts the shadow size beyond the element.

How soft or hard the shadow edges appear. Higher = softer.

Yes! Stack multiple box-shadow values separated by commas.