CSS Shadow Generator

Visually create and customize box-shadow effects and get the CSS code.

Horizontal Offset

px

Vertical Offset

px

Blur Radius

px

Spread Radius

px

Shadow Color

Opacity (0.50)

Inset

Box Color

Background Color

Preview

CSS Code

How to Use This Tool

Use the sliders to adjust the Horizontal Offset, Vertical Offset, Blur Radius, and Spread Radius.
Pick a Shadow Color and adjust its Opacity using the color picker and slider.
Toggle the Inset switch to create an inner shadow instead of an outer one.
Change the Box Color and Background Color to preview how the shadow looks in different contexts.
Copy the generated box-shadow CSS code from the input field at the bottom right.

Related Tools

Gradient Maker

Create CSS gradients.

SVG Shape Generator

Create and customize basic SVG shapes.