Preview
The gradient updates as you change any control.
Presets
Gradient
Pick a type, then set its direction and shape.
Tile the stops across the box.
Angle135°
Colour stops2 / 10
Moving a stop up or down swaps its place on the gradient with its neighbour.
- Stop 1
- Stop 2
Code
Copy the CSS, or the same gradient as a Tailwind class.
CSS
background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
Tailwind class
bg-[linear-gradient(135deg,#4f46e5_0%,#ec4899_100%)]
The Tailwind class is an arbitrary value for Tailwind v4, with spaces written as underscores.