🔲

Box Shadow Generator

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

Preview

Layers ()

Presets

Layer

Horizontal Offset: px

Vertical Offset: px

Blur Radius: px

Spread Radius: px

Shadow Color

Opacity: %

Inset

CSS Code

Embed this tool on your website

× px

Theme

Color

Background

Border

Border Color

Border Radius

Show Branding Allow Fullscreen Compact mode Enable animations Transparent background

👁️ Preview

💡 Integration Tip

Copy the embed code and paste it into your website HTML. The responsive version adapts to all screen sizes automatically.

Rate this tool

✓

ℹ️ 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.

💡 Use Cases

Adding depth to cards and containers

Creating button hover effects

Designing modern UI elements

Making elements pop from backgrounds

Experimenting with shadow styles

📋 How to use

Adjust horizontal and vertical offset

Set blur radius and spread

Choose shadow color and opacity

Copy the generated CSS code

💎 Pro Tips

Subtle shadows look more natural (low opacity, slight blur)
Use multiple shadows for depth
Inset shadows create pressed effects

❓ Frequently Asked Questions

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.

🔥 Popular Tools

No more tools to show

Explore All Tools