Gradient Generator

Adjust linear or radial gradient stops and copy the generated CSS.

Design

Share this tool

Angle: 135°

#6366f10%

#ec4899100%

background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

How to Use

1
Choose linear or radial mode.
2
Edit color-stop fields and positions, add or remove stops, and set angle or shape.
3
Inspect the preview and copy CSS.

Use the controls beside each stop; the preview bar is not a draggable stop editor. Check text contrast on every part of the final gradient.

Select a color and copy HEX, RGB, HSL and other displayed color values.

Build layered CSS box shadows with offsets, blur, spread, color and inset options.

Adjust individual corner radii in pixels or percentages and copy the CSS.

Generate color harmonies from a base color and copy palette values.

Browse the built-in Tailwind color table and copy a color or utility value.

Preview approximate TikTok, Reels or Shorts overlays on a portrait image.