Box Shadow Generator

Dark Background

Horizontal Offset 0

Vertical Offset 4

Blur Radius 10

Spread Radius 0

Color

Opacity 40%

Inset shadow

CSS Code

What is a CSS Box Shadow?

The CSS box-shadow property adds shadow effects to HTML elements. It's one of the most versatile CSS properties, allowing you to create depth, emphasis, and visual hierarchy.

This tool features:

Real-time preview — See the shadow update instantly as you adjust controls.
Full control — Adjust horizontal/vertical offset, blur, spread, color, opacity, and inset.
Dark mode preview — Toggle between light and dark backgrounds to see how your shadow looks.
Presets — Start from common shadow styles and customize further.

Box Shadow Properties

Property	Description	Example
`h-offset`	Horizontal position (negative = left)	`4px`
`v-offset`	Vertical position (negative = up)	`4px`
`blur`	Shadow softness (0 = sharp edge)	`10px`
`spread`	Shadow size (positive = larger, negative = smaller)	`2px`
`color`	Shadow color with opacity	`rgba(0,0,0,0.4)`
`inset`	Inner shadow instead of outer	`inset 0 2px 4px`

How to Use

Choose a preset or start from scratch — Select a preset to see common shadow styles, or adjust the sliders directly.
Customize the shadow — Adjust offset, blur, spread, color, and opacity. Toggle inset for inner shadows.
Copy the CSS — Click Copy CSS to copy the generated box-shadow property to your clipboard.

Frequently Asked Questions

What is the difference between blur and spread?

Blur controls how soft the shadow edge is (higher = softer). Spread controls the size of the shadow (positive = larger shadow, negative = smaller shadow). A spread of 0 means the shadow is the same size as the element.

What does inset do?

Inset makes the shadow appear inside the element instead of outside. This is useful for creating pressed or recessed effects, like sunken buttons or input fields.

Is this tool free to use?

Yes. All processing happens entirely in your browser. No data is sent to any server.