CSS gradient generator

Design a color gradient for your website background and copy the CSS. Drag the stops along the bar, click it to add colors and choose between linear, radial or conic gradients.

Gradient

Linear Radial Conic

Angle:

Shape

Center

Repeat (repeating-gradient)

Examples:

Colors

Each color accepts HEX, rgba(), hsl(), oklch() or a CSS name; use transparent or an alpha below 1 to blend with the background.

CSS code

Gradient types in CSS

linear-gradient() blends colors along a line at the angle you choose (0deg from bottom to top, 90deg from left to right). radial-gradient() spreads them in circles or ellipses from a center, and conic-gradient() rotates them around a point, like a color wheel or a pie chart.

The repeating-linear-gradient(), repeating-radial-gradient() and repeating-conic-gradient() versions repeat the pattern: with close stops (for example at 0% and 10%) they make stripes and checks without images.

How to use the code

Gradients are CSS images: apply them with background or background-image, never with background-color. All current browsers support them without -webkit- prefixes.

For gradient text, combine the background with background-clip: text and color: transparent. And if you put text on top, check its contrast against the lightest color of the gradient.