HTML & CSS

CSS Gradient Tutorial: Linear, Radial, and Conic

Learn CSS gradients with three examples, understand where each gradient type starts, and generate a two-color background without confusing images and colors.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

Treat a gradient as a generated image

A CSS gradient is an image generated from color stops. Put it in background-image, or in the background shorthand where an image value is accepted. Do not put linear-gradient() into background-color or color: those properties expect color values, not images. That distinction explains many examples where a valid-looking function produces no visible change.

Start with a box that has visible dimensions and a solid fallback background. A gradient has no natural photograph-like width or height of its own; it paints into the area supplied by the element. An empty element with no height can contain a valid gradient declaration while showing nothing at all.

Compare three types in the same layout

This sample gives three swatches the same dimensions and colors so only their geometry changes. The labels sit outside the colored boxes. That makes it easier to compare the shapes without also needing to solve text contrast over every part of the blend.

<div class="gradient-samples">
  <figure><div class="sample linear"></div><figcaption>Linear</figcaption></figure>
  <figure><div class="sample radial"></div><figcaption>Radial</figcaption></figure>
  <figure><div class="sample conic"></div><figcaption>Conic</figcaption></figure>
</div>

.gradient-samples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
  max-width: 48rem;
  margin-inline: auto;
}
.gradient-samples figure { margin: 0; }
.gradient-samples figcaption { padding-block: .5rem; }
.sample { height: 10rem; background-color: #1d4ed8; }
.linear { background-image: linear-gradient(90deg, #1d4ed8, #f97316); }
.radial { background-image: radial-gradient(circle, #1d4ed8, #f97316); }
.conic { background-image: conic-gradient(from 0deg, #1d4ed8, #f97316); }

The linear swatch changes color along a straight line from left to right. The radial swatch starts at the center and spreads outward as a circle. The conic swatch changes color around the center, creating a sweep rather than a center-to-edge fade. Look for the conic seam where the final color meets the starting color.

Understand direction separately from color placement

For a standard linear gradient, zero degrees points upward, ninety degrees points right, and one hundred eighty degrees points downward. The first color belongs at the start of that directed line. Reversing the angle by half a turn reverses where the two endpoints appear without requiring you to reorder the colors.

Color stops place colors along the line or shape. Two unpositioned endpoint colors produce a simple blend. Adding a third color introduces another stop; assigning explicit percentages controls where each color must appear. Two different colors placed at the same position create a sharp boundary instead of a gradual transition at that location.

Reproduce the three examples in the tool

Open the CSS Gradient Generator, choose Linear, enter angle 90, and set the colors to #1d4ed8 and #f97316. Switch to Radial to compare the centered circle; the angle control is hidden because this radial mode does not use an angle. Choose Conic and angle 0 for the final example.

The tool exports a background declaration with two opaque colors. It does not add the HTML swatches, create extra stops, assign transparency, or calculate contrast for text placed above the result. Copy the declaration into the selector for your own element, then adapt surrounding layout and accessibility choices in that page.

Change one variable and predict the result

Change the linear angle from ninety to one hundred eighty degrees while keeping the colors fixed. The blue endpoint should move from the left edge to the top, and orange should appear toward the bottom. That small exercise confirms which setting controls direction before you begin adjusting several colors and positions together.

Next, replace orange with #22c55e in all three samples. Their geometry should remain unchanged while their endpoint color changes. If one swatch becomes a solid color instead, inspect its complete background-image declaration for a missing comma or closing parenthesis rather than assuming the new color is incompatible.

Check the component, not only the swatch

When a gradient becomes a page background, review its crop, repetition and the content placed over it. A smooth decorative swatch does not guarantee readable white text at its brightest endpoint. Keep a separate solid text surface when the gradient is complex or changes dynamically.

Inspect the actual selector in developer tools if the gradient does not appear. Confirm that the element has height, that the declaration is accepted, and that a later background shorthand is not replacing it. The CSS Images specification defines the underlying image model, while MDN’s linear-gradient reference provides syntax and direction details for the first example.