Generate gradients visually

Use the free CSS gradient generator — pick your colors, adjust the direction and type, and copy the ready-to-use CSS. No account required.

Linear gradients

The most common type — transitions colors in a straight line:

/* Simple two-color */
background: linear-gradient(to right, #ff6600, #ffcc00);

/* With direction in degrees */
background: linear-gradient(135deg, #667eea, #764ba2);

/* Multi-color with stops */
background: linear-gradient(to bottom, #ff0000 0%, #ff6600 50%, #ffcc00 100%);

The direction can be: to right, to bottom, to top left, or an angle in degrees (135deg = diagonal from top-left to bottom-right).

Radial gradients

Radiates from a center point outward:

/* Circle from center */
background: radial-gradient(circle, #ff6600, #ffcc00);

/* Ellipse from custom position */
background: radial-gradient(ellipse at top left, #667eea, #764ba2);

/* With stops */
background: radial-gradient(circle at center, #ffffff 0%, #e0e0e0 50%, #999 100%);

Use circle for a perfectly circular gradient or ellipse(default) to follow the element's shape.

Conic gradients

Rotates colors around a center point — like a color wheel or pie chart:

/* Color wheel */
background: conic-gradient(red, yellow, green, blue, red);

/* Pie chart segment */
background: conic-gradient(#4CAF50 0deg 90deg, #2196F3 90deg 180deg, #FF5722 180deg 360deg);

Conic gradients are newer (supported in all modern browsers since 2021) and excellent for pie charts and color wheel effects.

Making gradients look natural

A common problem: harsh-looking gradient transitions. Three techniques that help:

  1. Add a middle color stop: instead of jumping directly from color A to B, add an intermediate mixed color at 50% to smooth the transition.
  2. Use HSL colors: gradients between HSL values often look more natural than RGB because HSL represents how humans perceive color.hsl(0, 100%, 50%) → hsl(60, 100%, 50%) produces a clean warm gradient.
  3. Avoid complementary color pairs: opposite colors on the color wheel (red/green, blue/orange) produce muddy brown in the middle. Adjust the middle stop or add a warm/cool neutral to bridge the gap.

Gradient text

You can apply gradients to text using a clip:

h1 {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Works in all modern browsers. The -webkit- prefix is still needed for Safari compatibility.

Repeating gradients

For stripe patterns and repeating textures:

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #f0f0f0,
  #f0f0f0 10px,
  #e0e0e0 10px,
  #e0e0e0 20px
);

Summary

CSS gradients use linear-gradient(), radial-gradient(), and conic-gradient(). Each takes a direction/shape and a list of color stops. For complex gradients, use the free CSS gradient generator to design visually and copy the code rather than writing stops manually.