ITZDABBZZ
Back to tools
Color Toolspublic tool

Gradient Generator

Build a CSS gradient with as many colour stops as you need, pick the interpolation space, and copy the CSS, the Tailwind arbitrary-value class or an SVG equivalent.

Type
linear
Stops
2
Interpolation
srgb (browser default)
Geometry
135deg

Preview

linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)

Controls

Type, angle and interpolation

Gradient type
Interpolation hint
135deg
Radial shape

Colour stops

2 stops

0%
100%

CSS

background-image declaration

background-image: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)

Tailwind v4

Arbitrary-value utility class

bg-[linear-gradient(135deg,_#8b5cf6_0%,_#ec4899_100%)]

SVG equivalent

A static <svg> you can inline or save as a file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
    <defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="0%">#8b5cf6 0%, #ec4899 100%</linearGradient></defs>
    <rect width="200" height="200" fill="url(#g)" />
</svg>