CSS Tools

Tune preview backgrounds, box shadows, gradients, and border radius with a live preview.

Useful for quickly shaping UI cards and copying plain CSS for the current settings.

Preview Colors

Adjust the preview canvas background and the card background used when Gradient is disabled.

Preview background

Card background

The card background is only applied when Gradient is disabled.

Box Shadow

Enabled

Adjust shadow position, blur, spread, and opacity.

X offset

Y offset

Blur

Spread

Opacity

Shadow color

Inset shadow

Gradient

Enabled

Build a linear gradient and control its angle and middle stop.

Angle

From

Via

Use middle color

Border Radius

Enabled

Adjust each corner radius independently.

Top left

Top right

Bottom right

Bottom left

Live Preview

Only enabled effects are applied here.

Preview

Shadow

#0f172a

Gradient

#06b6d4

CSS Output

CSS snippet ready to paste into a stylesheet.

.css-preview {
  background: linear-gradient(24deg, #06b6d4 0%, #8b5cf6 50%, #f97316 100%);
  border-radius: 36px 36px 36px 36px;
  box-shadow: 0px 18px 30px 0px rgba(15, 23, 42, 0.5);
}