Shadow Generator

Build a CSS box-shadow with live preview.

Calculated locally in your browser.

Overview

Builds a CSS box-shadow visually — offset, blur, spread, color and opacity — with live preview and copyable CSS.

How to use it

1Adjust the sliders and color.
2Copy the generated box-shadow CSS.

Related tools

All design tools

Gradient GeneratorBuild a linear or radial CSS gradient with live preview.Border Radius GeneratorBuild a CSS border-radius, with independent corners.Color PickerPick a color from anywhere on your screen, or enter one manually.Contrast CheckerCheck WCAG contrast ratio between two colors.