How to Create a Linear Gradient in CSS

Use linear-gradient() as a background image. This declaration creates a left-to-right transition from blue to violet:

.element {
  background: linear-gradient(to right, #2563eb, #a855f7);
}

A CSS gradient is an image value, not a color value. Put it in background or another property that accepts images; background-color accepts colors and cannot hold a gradient. The gradient fills the box where it is drawn and has no intrinsic dimensions of its own. MDN: linear-gradient() · W3C: CSS Images Module Level 3

1. Choose the gradient direction

With no direction argument, a linear gradient runs downward, from top to bottom. Use a side or corner keyword for a direction that reads naturally:

.to-right {
  background: linear-gradient(to right, #2563eb, #a855f7);
}

.to-top-right {
  background: linear-gradient(to top right, #2563eb, #a855f7);
}

You can also use an angle. CSS angles start at the upward direction and increase clockwise: 0deg points up, 90deg right, 180deg down, and 270deg left.

.angled {
  background: linear-gradient(135deg, #f97316, #7c3aed);
}

The first argument defines the gradient line, which determines its direction and the placement of color stops, as described in the W3C specification. Use keywords when you mean a box-relative side or corner, and an angle when you want a specific rotation.

2. Position and shape color stops

A gradient needs at least two colors. If you omit stop positions, CSS distributes the colors along the gradient. Add percentage or length positions to control where each color appears:

.positioned-stops {
  background: linear-gradient(
    90deg,
    #0f172a 0%,
    #2563eb 55%,
    #e0f2fe 100%
  );
}

Here, the blue stop sits just past the midpoint. You can use lengths as well as percentages when a fixed distance is useful. When a stop position is omitted, the first and last colors anchor the ends, while unpositioned stops between them are distributed between their neighboring positioned stops.

Create a hard color boundary

Give adjacent colors the same stop position to create a sharp edge instead of a gradual blend. This works for stripes, split panels, and simple color blocks:

.split {
  background: linear-gradient(90deg, #2563eb 0 50%, #f97316 50% 100%);
}

Shift the transition midpoint

A color hint placed between two stops shifts where the transition reaches its midpoint. It is a hint, not an extra color:

.shifted-midpoint {
  background: linear-gradient(90deg, #2563eb, 30%, #f97316);
}

3. Repeat a gradient pattern

Use repeating-linear-gradient() when the stop pattern should repeat across the image. The distance from the first stop to the final stop sets the length of each repeating segment:

.pinstripe {
  background: repeating-linear-gradient(
    45deg,
    #1d4ed8 0 8px,
    #dbeafe 8px 16px
  );
}

Different colors at the segment boundary can produce a hard seam. To make repetitions flow continuously, repeat the initial color at the end of the segment. See MDN: repeating-linear-gradient().

4. Put the gradient on an element

The gradient is drawn within the element’s box, so make sure the element has visible dimensions. For text over a gradient, choose colors with enough contrast for the text to remain readable.

<div class="hero">
  <h1>A gradient background</h1>
</div>

.hero {
  min-height: 16rem;
  padding: 2rem;
  color: white;
  background: linear-gradient(135deg, #f97316, #7c3aed);
}

Use the background shorthand for a simple gradient. If you also need a fallback color, set it separately; the gradient belongs in the image layer:

.hero {
  background-color: #312e81;
  background-image: linear-gradient(135deg, #f97316, #7c3aed);
}

5. Choose a color interpolation space carefully

CSS Images Module Level 4 adds syntax for choosing the color space used to interpolate between stops. For example:

.modern-interpolation {
  background: linear-gradient(90deg in oklab, blue, red);
}

This is newer syntax than the basic gradient function. Browser support for interpolation options can differ from support for ordinary gradients, so check compatibility for the browsers you target before relying on it. The basic linear-gradient() function has broad support, but that does not imply that every newer interpolation option does. See the W3C CSS Images Module Level 4 and MDN’s guide to CSS gradients.

6. See the gradient in a browser

To inspect a gradient in context, save the HTML and CSS in a page and open it in a browser. For a screenshot, use your browser’s developer tools or automate a browser with a screenshot library. The browser renders the CSS; the screenshot tool captures the rendered page.

Or skip the browser setup

To capture a page that already contains your gradient, ScreenshotNeo returns an image or PDF from one GET request. See the ScreenshotNeo API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the capture; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers say whether the page was clean and billed. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo, then sign up for 1,000 free screenshots a month with no card.

Troubleshooting

Symptom	Cause	Fix
No gradient appears	The declaration is on `background-color`, which takes a color, or the element has no visible size.	Use `background` or `background-image` and give the element content, a height, or a minimum height.
The gradient runs the wrong way	Angle directions may be interpreted as if zero pointed right.	Remember that `0deg` points up and angles increase clockwise; use a side keyword such as `to right` if that is clearer.
A color transition looks abrupt	Stops may be too close together or share a position.	Move the stops farther apart for a gradual blend. Use the same position only when you want a hard edge.
The pattern does not repeat as expected	The first-to-last stop distance defines the repeat segment, and segment endpoints may create a seam.	Check the stop positions and repeat the starting color at the end when you want a continuous transition.
A newer color interpolation declaration is ignored	The browser may not support that Level 4 syntax.	Use the basic gradient syntax or check support for the specific interpolation option in your target browsers.
The screenshot shows a blank or incomplete page	The target page may not have finished loading or may be blank.	Check the page URL and its load behavior. With ScreenshotNeo, inspect the response’s `X-Page-Verdict` and `X-Billed` headers to see the page result and billing status.

Performance, reliability, and cost

For ordinary interface backgrounds, the main practical concern is rendering the page that contains the gradient, not downloading a separate gradient image. Keep the number of stops and layers appropriate to the design and check the result at the element’s actual size. If you capture pages through an API, account for page load time in your request timeout and inspect the returned verdict and billing headers. ScreenshotNeo offers caching with a configurable TTL, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, and a usage API. Its plans are Free (1,000 shots/month), Starter ($5 for 3,000), Growth ($15 for 15,000), Pro ($39 for 60,000), Scale ($99 for 250,000), and Business ($249 for 1,000,000); yearly billing gives two months free, and every feature is on every plan.

FAQ

Can I use a linear gradient as text color?

The gradient itself is an image value. This guide uses it as a background; applying it to text requires a separate text-clipping technique.

How many colors can a gradient have?

You can include multiple color stops. Add stops where you want particular colors to appear along the gradient line.

Should I use an angle or a direction keyword?

Both are valid. Keywords make a side or corner intent easy to read; an angle gives you a specific rotation.

When should I use a repeating gradient?

Use it for a repeating stripe or band pattern. For a single smooth color transition, use linear-gradient().