Generate a CSS Color Gradient
Design flexible linear, radial, or conic gradients with multiple color stops, preview them on UI elements, and copy ready-to-use CSS in a single click.
Gradient type
Switch between linear, radial, or conic gradients depending on your layout.
Orientation
Pick a direction for linear gradients or a focal point for radial and conic gradients.
Color stops
Define each color and its position along the gradient. You can add up to five colors.
Gradient preview
CSS code
background-image only
background-image: linear-gradient(to right top, #051937 0%, #A8EB12 100%);CSS class snippet
.my-gradient {
background-image: linear-gradient(to right top, #051937 0%, #A8EB12 100%);
}