CSS Gradients: The Complete Guide from Linear to Conic

Why CSS gradients are still underused

Gradients were introduced in CSS3 (2009) but their full power is rarely exploited. Most developers use them only for simple top-to-bottom fades. The three gradient types solve fundamentally different visual problems:

• linear-gradient() — directional transitions along a straight line, controlled by an angle or named direction.
• radial-gradient() — transitions that radiate from a center point outward in circular or elliptical shapes.
• conic-gradient() — transitions that sweep around a center point like clock hands — ideal for pie charts, color wheels, and angular patterns.

All three share the same color stop syntax but differ in geometry. Once you understand the underlying model, switching between them becomes intuitive.

linear-gradient: the foundation

A linear gradient transitions colors along a straight line defined by a direction and one or more color stops. Every other gradient type builds on the color stop syntax introduced here.

Syntax

The direction argument controls the gradient line angle:

Color stops: positions, lengths, and hard transitions

Each color stop accepts an optional position (percentage or length). Omitting positions distributes stops evenly. Hard transitions — where one color abruptly becomes another — are created by placing two stops at the same position:

You can also specify a stop with two positions, creating a solid band: red 20% 40% is equivalent to red 20%, red 40%. This shorthand is essential for clean striped patterns.

The color hint: midpoint control

Between two color stops you can insert a bare percentage — the color hint (also called midpoint). It shifts where the interpolation midpoint sits. Without a hint, the midpoint is exactly halfway. A hint at 20% pulls the midpoint toward the first stop, creating a slow start and fast finish.

repeating-linear-gradient

repeating-linear-gradient() tiles the gradient pattern infinitely. The key constraint: the last color stop must specify an explicit length (not 100%) so the browser knows the tile size. If the first and last stop share the same color, the repetition is seamless.

radial-gradient: circular and elliptical

A radial gradient radiates from a center point. By default it creates an ellipse that touches all four sides of its container. The gradient line runs outward from the center, and color stops are measured along that line.

Syntax

The first argument is optional and controls shape and size. The at <position> part moves the center point. When omitted, the gradient uses ellipse farthest-corner at center.

Shape and sizing keywords

The size keyword defines where the gradient ends — not the total size:

• farthest-corner (default) — gradient extends to the farthest corner of the box. Safe for full-container fills.
• closest-corner — gradient ends at the nearest corner. Creates tight, concentrated spots.
• farthest-side — ends at the farthest side. Useful for off-center spots.
• closest-side — ends at the nearest side. Keeps the gradient contained even when the center is near an edge.

Positioning the center

The at keyword accepts any valid CSS position value: keywords like top left, percentages, or lengths. Moving the center outside the element creates partial spotlights — a common technique for subtle lighting effects on cards and hero sections.

conic-gradient: the newcomer

conic-gradient() was the last gradient type to land in browsers (Chrome 69, Firefox 83, Safari 12.1). Unlike linear and radial, its color transitions sweep around a center point rather than away from it. Angles are measured clockwise from the top (12 o'clock).

Syntax

The <code>from &lt;angle&gt;</code> argument rotates the starting angle. Without it, the gradient starts at 0deg (top). The <code>at &lt;position&gt;</code> shifts the center, same as radial-gradient.

What conic gradients are actually good for

• Pie charts — each segment is a color stop pair at consecutive percentages, with no JavaScript required.
• Color wheels — a single full-turn gradient cycling through hsl(0deg) to hsl(360deg).
• Angular patterns — checkerboards, pinwheels, and angular stripes are all achievable with repeating-conic-gradient.
• Progress rings — combined with border-radius: 50%, a conic gradient creates a clean circular progress indicator.

repeating-conic-gradient

repeating-conic-gradient() tiles the angular pattern. Hard transitions (same position twice) create sharp geometric shapes. A classic checkerboard uses just two stops at 0deg and 90deg.

Advanced patterns

These techniques go beyond standard gradient usage. Each combines multiple gradient properties or CSS features to produce effects that would otherwise require images or JavaScript.

Striped backgrounds

Hard-stop linear gradients tiled with background-size create infinitely scalable CSS stripes. The trick is setting the last stop at the same position as the tile size — not 100%. Use repeating-linear-gradient for cleaner code, or stack multiple background layers for diagonal crosshatch patterns.

Gradient text

Gradient text requires three declarations working together: apply the gradient as background, set -webkit-background-clip: text (and the unprefixed version), then make the text itself transparent with color: transparent. The background shows through only where text glyphs render. Browser support is universal as of 2024, but always provide a solid color fallback with @supports.

Mesh gradients

A mesh gradient layers multiple radial gradients — each with a transparent endpoint — over a base background color. Each layer is a spotlight contributing to a complex, organic blend. Performance cost is low (no blur filters), but readability depends on keeping the layer count reasonable (4-6 is ideal). Use the PixCode Color Palette Generator to pick harmonious colors for your mesh layers.

Checkerboard with conic-gradient

The cleanest CSS checkerboard uses repeating-conic-gradient(#000 0% 25%, transparent 0% 50%) combined with background-size. This is significantly more concise than the classic two-layer linear-gradient approach.

Side-by-side comparison

Performance considerations

CSS gradients are rasterized by the GPU and cached. They are generally cheap — far cheaper than SVG fills or canvas drawing — but a few patterns cause repaints or layout thrash:

Never animate background or background-image directly. If you need an animated gradient, fake it: apply the gradient to a pseudo-element, then animate its opacity or transform. This keeps the animation on the compositor thread.

Accessibility and contrast

Gradients create variable contrast across the element surface. Text placed over a gradient must meet WCAG AA (4.5:1 for normal text, 3:1 for large text) at every point — not just the average. The hardest case is text that spans from the light end to the dark end of a gradient.

The safest approach: test contrast at the lightest point of the background gradient. If it passes there, it passes everywhere. Use a semi-transparent dark overlay (background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%)) to guarantee readable text on photographic or gradient backgrounds.

Frequently asked questions