How to Create CSS Gradients: Linear, Radial, and Conic

Gradients add depth and personality to a design without a single image file. CSS supports three gradient types, and each creates a different effect. Once you understand the syntax, you can build backgrounds, buttons, and overlays that look polished and load instantly.

Linear Gradients

A linear gradient transitions colors along a straight line. You set the direction (an angle or keyword) followed by two or more color stops.

.hero {
  background: linear-gradient(135deg, #0e8f87, #14b8a6);
}

/* Multiple stops */
.bar {
  background: linear-gradient(to right, #09090b, #27272a, #09090b);
}

Radial Gradients

A radial gradient radiates outward from a center point, creating a circular or elliptical transition. It is perfect for spotlight effects and soft glows.

.glow {
  background: radial-gradient(circle at center, #14b8a6, transparent 70%);
}

Conic Gradients

A conic gradient rotates colors around a center point, like the slices of a pie. It is ideal for color wheels, pie charts, and decorative loaders.

.wheel {
  background: conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red);
  border-radius: 50%;
}

Tips for Smooth Gradients

• Use colors that are close in hue for subtle, professional transitions.
• Fade to 'transparent' rather than white to avoid dull gray edges.
• Add more color stops for richer, multi-tone effects.
• Test gradients in both light and dark themes to ensure enough contrast.

Gradients are resolution-independent and weightless. A well-chosen gradient replaces a heavy background image with a single line of CSS.

The CSS Gradient Generator lets you build linear, radial, and conic gradients visually and copy the exact CSS into your project.