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

What is a CSS gradient?

A CSS gradient is a background image defined entirely in code — no image files, no requests, no load time. It transitions between two or more colors across an element, and it's one of the most flexible tools in modern CSS: buttons, hero sections, card hovers, and subtle depth effects are all built from gradients.

The three types:

• linear-gradient() — colors along a straight line
• radial-gradient() — colors expanding outward from a center point
• conic-gradient() — colors wrapped around a circle (color-wheel style)

Linear gradients: the basics

The basic syntax:

background: linear-gradient(135deg, #667eea, #764ba2);

• The first value is the angle (or direction word like to right). 135deg runs from bottom-left to top-right.
• The remaining values are color stops — the colors, and where they sit along the line.

Adding explicit stops gives you control:

background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 50%, #86a8e7 100%);

Here the transition accelerates toward the middle stop. If two stops share a position, the color changes abruptly — a hard edge you can use for stripes.

Direction words vs angles

Diagonal directions are the most popular for hero backgrounds.

Radial gradients

background: radial-gradient(circle at center, #f5af19, #f12711);

The syntax adds a shape (circle or ellipse) and a position (at center, at top left, at 30% 60%). Radial gradients are great for glows, spotlight effects, and vignettes — try them for button hover states.

Conic gradients

background: conic-gradient(from 0deg, red, yellow, lime, aqua, blue, red);

Colors wrap around a full circle (close the loop by repeating the first color). Conic gradients power pie charts, loading spinners, and color wheels — all with zero images.

Browser support and prefixes

All modern browsers support all three gradient types unprefixed. Older Safari/iOS (pre-12.2) need the -webkit- prefix for linear and radial gradients:

background: -webkit-linear-gradient(135deg, #667eea, #764ba2);
background: linear-gradient(135deg, #667eea, #764ba2);

Always provide a plain background-color fallback before the gradient lines — that's what renders in ancient browsers and while the CSS loads.

Design best practices

• Use gradients for depth, not decoration — a subtle gradient on a button says "clickable"; competing rainbow gradients say "2008".
• Watch the text contrast — gradients change brightness across their span. Check text legibility with the Color Contrast Checker against the lightest part of the gradient.
• Keep brand colors in mind — extract colors from brand imagery with the Color Palette Extractor and build gradients from the palette.
• Prefer color pairs 60–120° apart on the color wheel for pleasing combinations.

Gradient text

To fill text with a gradient:

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

The text becomes the visible part of the gradient. Add a text-shadow fallback consideration: transparent color means no fallback text rendering in older browsers — test before shipping.

Generate gradient CSS in seconds

Instead of hand-writing syntax and prefix lines, use the CSS Gradient Generator:

1. Choose linear, radial, or conic.
2. Pick your colors and adjust the angle/position with sliders.
3. Copy the generated CSS — including the -webkit- prefix line and color fallback.

Combine it with the Color Converter to tweak hex values across formats, and verify accessible color pairs with the Color Contrast Checker — everything runs in your browser, with nothing uploaded anywhere.