How to Make a CSS Gradient (Linear, Radial, and Conic)

A CSS gradient is an image that the browser generates on the fly from a list of color stops. There is no file, no request, no cache concern — just a function call that returns a smoothly-blended image the same size as the element it is applied to. The three types (linear, radial, conic) cover almost every gradient you will ever want, and the syntax is short enough to memorize in an afternoon.

The three gradient types

CSS has three gradient functions, each with a different geometry. They take the same shape of input (a list of color stops with optional positions) and return different kinds of images.

linear-gradient() — color along a line

The default. Color transitions from one side of the element to the other along a straight line.

background: linear-gradient(to right, #ff6b6b, #4ecdc4);

The first argument is the direction. to right is shorthand for "start on the left, end on the right." Other valid directions: to left, to top, to bottom, to top right, to bottom left, or any angle in degrees: 45deg, 180deg, 270deg. The default (no direction) is to bottom.

After the direction come the color stops. Each stop is a color and an optional position (0%–100% along the line). Two stops give you the classic two-color gradient; three or more give you more complex blends.

radial-gradient() — color from a center point

Color radiates from a single point outward. The default is a centered circle; you can change the shape (circle or ellipse), the size (closest-side, farthest-corner, etc.), and the position (center is the default; you can also use at top left, at 20% 80%, etc.).

background: radial-gradient(circle at center, #ffffff, #cccccc);

Useful for spotlights, vignettes, soft backgrounds, and any effect that needs to feel like a light source. The default ellipse at center shape fits the element's aspect ratio, so a circle on a rectangular element becomes an ellipse.

conic-gradient() — color around a center point

Color sweeps around a center point like a pie chart or a color wheel. The 0° position is at the top (12 o'clock), and angles increase clockwise.

background: conic-gradient(from 0deg, #ff6b6b, #4ecdc4, #ffe66d, #ff6b6b);

The example above is a four-color sweep that loops back to the starting color. Conic gradients are the foundation of pie charts, color wheels, and any effect that needs angle-based color. The geometry is different enough from the other two that it is worth playing with them in a CSS gradient generator before using one in production.

Color stops, in detail

Each stop is a color and an optional position. The position defaults to "evenly distributed between the previous and next stop," which is usually what you want. The cases where you need to specify positions:

Hard color transitions (no blend)

Two stops at the same position produce a sharp line, not a blend. The classic use case is a stripe pattern:

background: linear-gradient(to right, #ff6b6b 50%, #4ecdc4 50%);

This is a hard-edged two-color background, not a gradient. Useful for progress bars, geometric backgrounds, and any case where you want a clean split.

Asymmetric blends

By default, stops are evenly distributed. If you want a different distribution, specify the positions:

background: linear-gradient(to right, #ff6b6b 0%, #4ecdc4 30%, #ffe66d 100%);

The transition from red to teal happens in the first 30% of the element; the transition from teal to yellow happens in the last 70%. Useful for highlighting a specific zone or matching a design with a non-uniform color distribution.

Multi-stop gradients

You can have as many stops as you want. A four-stop gradient is the most common way to get a more interesting blend than a simple two-color fade:

background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);

The result is a vibrant, multi-hue gradient that is hard to describe but easy to look at. Most professional-looking gradients in modern design are 3-stop or 4-stop — the two-color version looks dated.

Patterns that look professional

1. The "soft" gradient (low contrast stops)

Pick stops that are close in lightness. A high-contrast gradient (e.g., black to white) looks harsh; a low-contrast gradient (e.g., #667eea to #764ba2) looks polished. The trick: pick two colors with the same hue family, or two adjacent hues, and let the saturation do the work.

2. The "sunset" gradient (warm-to-cool diagonal)

Two complementary colors, at 135°, with the warm color in the top-left and the cool color in the bottom-right. The classic:

background: linear-gradient(135deg, #ff6b6b, #4ecdc4);

Read the gradient from the upper-left to the lower-right. The warm color recedes and the cool color advances, which gives the gradient a sense of depth without being a literal 3D effect.

3. The "spotlight" radial (for hero sections)

A radial gradient with a bright center and a darker edge. The "vignette" effect that draws the eye to the content:

background: radial-gradient(ellipse at center, #ffffff 0%, #f0f0f0 50%, #d0d0d0 100%);

Use this for hero sections where the headline needs to pop. The brightness gradient does the work that a literal box-shadow would otherwise do.

4. The "noise" or "grain" overlay

A subtle conic or linear gradient layered with a low-opacity noise texture (often an SVG data URL) gives flat colors depth. The pattern is everywhere in modern design systems — Stripe, Linear, Vercel. Useful for replacing the default "background: white" on a marketing page with something that feels intentional.

Using gradients in the right place

Gradients work in any property that accepts an image. The most common uses:

• background / background-image — the obvious one. A gradient as a full background, a section background, or a button background.
• border-image — gradients as borders. Tricky to get right but powerful for accent effects.
• mask-image / -webkit-mask-image — a gradient as a mask. Useful for fade-in/fade-out text effects, image vignettes, and any case where you want a soft edge without an alpha-channel image.
• text-fill-color with a transparent -webkit-text-stroke-color — gradient text. Common in hero headlines.

For text gradients, the pattern is:

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback for browsers that don't support background-clip: text */
}

The fallback color: transparent is a gotcha — without it, browsers that don't support the gradient text show invisible text. Always set a fallback color (the darker of the two gradient stops is a safe default).

Accessibility: contrast and motion

Gradients on text or interactive elements need the same contrast check as solid colors. A gradient where the lightest stop is on the text means the text is unreadable on that part of the gradient. Two ways to fix this:

1. Use a low-contrast gradient (close in lightness) so the text remains readable across the full range.
2. Put the text on a solid background and the gradient on a separate decorative layer (a border, a heading underline, an icon).

A contrast checker will tell you if the lightest stop on the gradient still meets WCAG AA against the text color. Most polished gradient-text designs use a low-contrast gradient on a high-contrast solid text, not a high-contrast gradient on transparent text.

For users with vestibular disorders or motion sensitivity, animated gradients (e.g., a slowly-shifting background) can be a problem. Respect prefers-reduced-motion and either pause or remove the animation for those users. The pattern is straightforward:

@media (prefers-reduced-motion: reduce) {
  .animated-gradient { animation: none; }
}

One line of CSS that prevents the animation from running for users who would find it uncomfortable. Most polished production sites do this by default.

Verifying it works

After adding a gradient, check it in DevTools and on real devices:

1. Color accuracy. The colors you picked should look the same in the browser as they did in your design tool. Use a color picker on the rendered gradient to confirm — a hex-to-rgb conversion is faster than eyeballing it.
2. Resolution at large sizes. Gradients are vectors, so they should look the same at any size. If they look banded or pixelated, the issue is the surrounding element (a low-DPI canvas, a downscaled image), not the gradient itself.
3. Browser support. Linear and radial gradients have been supported since IE 10. Conic gradients are newer — Safari only added support in 12.1 (2019). If you need to support older browsers, the fallback is a solid background color or a small image file. @supports (background: conic-gradient(red, blue)) is the modern way to feature-detect.
4. Print stylesheet. Gradients on a printed page look flat or banded depending on the printer. If print is a use case (most marketing pages, some forms), set a solid color in the @media print stylesheet.

CSS gradients are one of the highest-leverage features in modern CSS. They replace image files, scale perfectly, cost nothing to download, and can be tuned with three lines of CSS. The patterns above — soft contrast, sunset diagonal, spotlight radial, grain overlay — are the 80% case. Everything else is iteration in a generator.