CSS Gradient Generator: Creating Beautiful Gradients

Types of CSS Gradients

CSS supports three types of gradients:

Linear Gradients

Create color transitions along a straight line.

background: linear-gradient(direction, color1, color2, ...);

Examples:

/* Top to bottom */
background: linear-gradient(#e66465, #9198e5);

/* Left to right */
background: linear-gradient(to right, red, yellow);

/* 45 degrees */
background: linear-gradient(45deg, blue, green);

Radial Gradients

Create color transitions radiating from an origin point.

background: radial-gradient(shape, color1, color2, ...);

Shapes: circle, ellipse

Conic Gradients

Create color transitions rotating around a center point.

background: conic-gradient(from angle, color1, color2, ...);

Great for pie charts and color wheels.

Color Stops

Control where colors appear in the gradient:

background: linear-gradient(
  red 0%,
  yellow 50%,
  green 100%
);

Gradient Tips

Our Gradient Generator