Gradient Builder
Pick your colors, set a direction, and copy the CSS.
Colors
Stop 1
Stop 2
Stop 3
Direction
→ Right
Interpolation Stops
12624
Preview
Stops
12stops · Click any swatch to copy hex
CSS
linear-gradient(to right, #D16BA5 0%, #C675BD 9.1%, #B981D0 18.2%, #AB8CDE 27.3%, #9B98E5 36.4%, #8DA3E8 45.5%, #81B0ED 54.6%, #76BFF6 63.6%, #69CFFB 72.7%, #5DDEFC 81.8%, #58EDF9 90.9%, #5FFBF1 100%)
A gradient needs a palette behind it.
Perfect Palette builds the palette your gradient comes from — harmony-scored, contrast-checked, ramped, and saved as gradient tokens alongside the colors rather than as a loose CSS snippet. Free to start, no account needed — color system tools are Plus, design.md authoring is Pro.