The developer tools you reach for every day, all in one place.

Converters, formatters, hashes, validators, and the small utilities you keep reopening stay together instead of getting lost across tabs.

GitHub

/ Tools

■

/ Tool Finder

109 tools

/ Box Shadow Generator

Presets

Shadows (2/5)

Shadow 1

Inset

Horizontal: 0px

Vertical: 4px

Blur: 6px

Spread: -1px

Color

Opacity: 10%

Shadow 2

Inset

Horizontal: 0px

Vertical: 2px

Blur: 4px

Spread: -2px

Color

Opacity: 10%

Preview Background

Preview

CSS Code

Tailwind Arbitrary Value

/ Selected Tool

Box Shadow Generator

Visual CSS box-shadow generator with multiple shadows support

■ 01

What is CSS Box Shadow?

The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple shadows separated by commas. Each shadow is described by horizontal and vertical offsets, blur and spread radius, color, an…

■ 02

How does it work?

Box shadows are defined by several values: horizontal offset (positive moves right), vertical offset (positive moves down), blur radius (larger means more blur), spread radius (positive expands, negative shrinks), and c…

■ 03

Sample Cases

Covers Subtle shadow, Medium elevation, and Inset shadow so you can compare common inputs and outputs quickly.

/ Code

■

/ Integration

Source code from the selected tool, shown here alongside the live version on the right.

/ Source Code

TypeScript

typescript

// No external dependencies needed - generates CSS box-shadow strings

interface Shadow {
  horizontal: number;
  vertical: number;
  blur: number;
  spread: number;
  color: string;
  opacity: number;
  inset: boolean;