CSS Box Shadow Generator

Create CSS box shadows visually with live preview. Adjust offset, blur, spread, color and inset. Copy production-ready CSS. Free online tool.

Tap to customize settings

Offset X: 5px

Offset Y: 5px

Blur: 15px

Spread: 0px

Color

Opacity: 40%

Inset

Second Shadow

Enable

Preview

CSS Code

◆ What it does

Design CSS box shadows with a visual editor. Adjust offset, blur, spread, color, and opacity with real-time preview.

▸ How to use

Adjust shadow properties using sliders: X/Y offset, blur, spread
Pick a shadow color and set opacity
Toggle inset shadow for inner shadow effects
Copy the generated CSS box-shadow code

▸ Why use this

Design pixel-perfect shadows for UI components
Generate CSS code without trial-and-error in DevTools
Create layered shadow effects with multiple shadows
Preview shadows in real-time on different backgrounds

CSS Gradient Color Picker Meta Tag Gen