A CSS gradient is a smooth transition between two or more colors, made with linear-gradient(), radial-gradient() or conic-gradient(). Here you build one from your palette colors, choose the type and angle, and copy the code.
Updated
Click a HEX to copy it · lock to keep it
Each cell shows the column color as text on the row color as background.
Click a shade to copy its HEX.
Saved in this browser only. Click a palette to load it.
A linear gradient runs in a straight line at an angle. A radial gradient spreads out from a center as a circle or ellipse. A conic gradient sweeps around a point, like the slices of a pie chart.
linear-gradient() and radial-gradient() work in all current browsers. conic-gradient() is supported by modern Chrome, Edge, Firefox and Safari. The fallback color covers older browsers.
Set the gradient as the background, add background-clip: text (and -webkit-background-clip: text) and make the text color transparent. The exported code already includes that class.
