CSS Reference

CSS Gradients

Complete guide to CSS gradients — linear-gradient, radial-gradient, conic-gradient syntax, color stops, and advanced patterns.

Overview

CSS gradients are `<image>` values generated by the browser, used with `background-image`. Three functions are available: `linear-gradient()` for directional transitions, `radial-gradient()` for circular/elliptical shapes, and `conic-gradient()` for angle-based sweeps. Gradients eliminate the need for image files, scale infinitely, and are hardware-accelerated.

Syntax

background-image: linear-gradient(<angle> | to <side>, <color-stop>, ...)

Values

linear-gradient()

Transitions colors along a straight line. Direction specified by angle or keyword (to right, to bottom, etc.).

radial-gradient()

Transitions colors outward from a center point. Shape can be circle or ellipse.

conic-gradient()

Transitions colors around a center point, like a pie chart or color wheel.

color-stop

A color optionally followed by a position: `#ff0000 30%`. Multiple stops create multi-color gradients.

repeating-*

`repeating-linear-gradient()` etc. — repeats the gradient pattern to fill the element.

Browser Support

linear-gradient and radial-gradient: all modern browsers. conic-gradient: Chrome 69+, Firefox 83+, Safari 12.1+.

Try it visually

Use our visual background-image (gradients) generator to create and preview CSS code in real-time.

Open CSS Gradients Tool

Frequently Asked Questions

Use an angle: `linear-gradient(45deg, #ff0000, #0000ff)` or a corner keyword: `linear-gradient(to bottom right, #ff0000, #0000ff)`.

Not directly with CSS transitions. Use CSS Houdini `@property` to register custom color properties, or animate `background-position` on an oversized gradient.

Use `border-image: linear-gradient(...) 1` or the technique of a gradient background on a wrapper element with inner content offset by the border width.