Color Gradient Generator

shades

tints

analogous

complementary

double-split-complementary

rectangle

split-complementary

tetradic

triadic

color

type

angle

harmony

steps

Colors



50%



100%

Type

Angle direction

Harmony method

Steps (5)

Add noise

Position

Randomize positions on next generation

Build your perfect gradient with ease

Quickly create perfectly harmonized color combinations and move seamlessly from creative vision to practical implementation. This tool helps you discover beautiful color schemes and instantly get the code in your preferred format, including CSS variables, SCSS, and Tailwind CSS.

How does it work?

Start by selecting the colors for your multi-step gradient. Then, use the advanced controls to perfect your design: change the gradient type (linear, radial, or conic), adjust the angle, fine-tune the color harmony method, and define the number of steps for smoother interpolation. When your gradient is flawless, instantly copy the generated code in standard CSS, SCSS, or Tailwind format.

Custom generated



background: linear-gradient(45deg, #c11ceb , #6f19b5 50%, #25007a 100%)

HDR color space

HDR oklab colors



background: linear-gradient(45deg, oklab(60.4% 0.207 -0.19), oklab(44.9% 0.117 -0.184), oklab(28.4% 0.031 -0.168))

Fallback colors



background: linear-gradient(45deg, #c11ceb, #6f19b5, #25007a)

PWA prompt