Gradients

Copy a CSS gradient in one click

This collection has 92 ready-made CSS gradients, each with a name and a note on where it works well. Filter by color, click a gradient to see its color stops, and copy the CSS line.

1. Pick a color filter, such as blue, purple, or orange, or leave it on All.
2. Click the copy button on a card to copy its CSS straight away.
3. Click the card itself to open it, then click a color stop to copy that hex code.

How to use a gradient as a CSS background

Paste the copied line into any CSS rule. This is the Emerald Isle gradient:

.hero {
  background: linear-gradient(150deg, #348f50 0%, #56b4d3 80%);
}

The first value is the angle: 150deg runs from the top left toward the bottom right. Each color stop pairs a hex code with a position, so the blue is fully reached at 80% and holds to the edge. Most gradients here are linear. The 22 radial ones use radial-gradient(circle, …) and spread out from the center.

How to make your own gradient

Open the CSS gradient generator to set your own colors, angle, and stop positions, with up to six stops. To match a gradient to your brand, start from one color and build lighter and darker steps with the tint and shade generator.