Gradient Maker

Build multi-stop gradients with live previews, PNG exports, CSS output, and Tailwind arbitrary values.

Build Your Gradient

Add as many stops as you need, drag them to reorder, and tune the final direction or angle live.

3 stops

Gradient Type

Direction / Angle

Stop 1

Drag to change the stop order.

Color Value

Position0%

Stop 2

Drag to change the stop order.

Color Value

Position50%

Stop 3

Drag to change the stop order.

Color Value

Position100%

Preview

Live render of the gradient exactly as it will export.

CSS Background Property

Paste directly into stylesheets or inline style objects.

background: linear-gradient(135deg, #2563EB 0%, #8B5CF6 50%, #EC4899 100%);

Tailwind Arbitrary Value

Ready for `className` usage in Tailwind projects.

bg-[linear-gradient(135deg,_#2563EB_0%,_#8B5CF6_50%,_#EC4899_100%)]