How to use the gradient generator

  1. Choose Linear, Radial, or Conic.
  2. For linear and conic gradients, drag the Angle slider.
  3. Edit the color stops. Each stop has a color and a position from 0% to 100%. Add up to six stops, and remove any stop as long as two remain.
  4. Try a preset as a starting point.
  5. Copy the CSS and paste it into your stylesheet.

The CSS includes a solid background color before the gradient. Very old browsers that do not support gradients use that color instead, and it also shows while a page is loading.

Types of gradients

Linear gradients change color along a straight line. The angle sets the direction: 0deg goes from bottom to top, 90deg from left to right, and 180deg from top to bottom.

background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);

Radial gradients spread out from a center point, which is good for spotlight and glow effects.

background: radial-gradient(circle at center, #1e293b 0%, #020617 100%);

Conic gradients rotate around a center point, like the hands of a clock. Use them for color wheels and pie-chart style indicators.

background: conic-gradient(from 0deg at 50% 50%, #ef4444 0%, #22c55e 50%, #ef4444 100%);

Design tips

  • Keep hues close. Gradients between neighboring colors on the color wheel, such as blue to purple, look smooth. Opposite colors, such as blue to orange, often pass through a muddy gray in the middle. Add a third stop to control the middle color.
  • Hard stops. Give two stops the same position to create a sharp line instead of a blend, for example #3b82f6 50%, #8b5cf6 50%.
  • Text on gradients. Check contrast at both ends of the gradient with the Color Converter. Text that is readable on the light end may fail on the dark end.
  • Banding. Long, subtle gradients across large areas can show visible steps on some screens. Increasing the color difference slightly or adding a small amount of noise in an image layer hides this.

Frequently asked questions

Do I need vendor prefixes like -webkit-?

No. Linear and radial gradients have worked without prefixes in all major browsers for many years, and conic gradients are supported in all current major browsers.

Can I use transparent colors?

Yes. Edit the copied CSS to use a value with an alpha channel, such as rgb(37 99 235 / 0%), for a stop. This is a common way to fade an image or section into the page background.