Copied!
Guide

How to get the CSS gradient from a website, and what to do when it is an image

A real gradient is a line of CSS you can read. A gradient baked into a picture is not. Here is how to tell which one you are looking at, and how to get each.

← Blog

November 6, 2026

3 min readIncludes a measured example

To get the CSS gradient from a website, right-click the element, choose Inspect and read the background-image value in the Computed tab. A real gradient shows up as a line such as radial-gradient(circle, rgb(127, 125, 252), rgb(244, 75, 204) 33%, rgb(229, 237, 245) 66%). Copy that line and it works in your own stylesheet. If DevTools shows an image file instead, the gradient is pixels and has to be approximated.

Skip the hunt. The free CSS gradient finder loads a page in a real browser and lists every gradient it renders, ready to copy.

Try it on any site. The free website color palette extractor shows you the colours a page really uses, ranked, as CSS. Paste a URL, no sign-up for your first lookup.

How do I read a gradient in DevTools?

  1. Right-click the area with the gradient and choose Inspect.
  2. Open the Computed tab and find background-image. Computed shows the final value after CSS variables and scripts have run.
  3. If the value is none, check the element's parents and its ::before and ::after pseudo-elements: gradients are often painted on those.
  4. Copy the value. Colors may appear as rgb(); they work as they are.

How do I find every gradient on a page?

A page can use dozens, and most are painted by components you would never think to inspect. The gradient finder collects every gradient the browser renders. We ran it on stripe.com on November 6, 2026. The most used gradient was the radial-gradient shown above, which appeared 6 times on the page. The tool reports the kind (linear, radial or conic), whether it repeats, and a copyable value for each.

What if the gradient is an image?

Many hero backgrounds are exported as a PNG, WebP or SVG. There is no rule to read, so you build a close match:

  1. Pick the color at the start, the middle and the end with a color picker, and note where each sits as a percentage.
  2. Estimate the direction: a top-to-bottom fade is 180deg, left to right is 90deg.
  3. Write linear-gradient(180deg, #start 0%, #middle 50%, #end 100%) and compare it side by side with the original.
  4. For a soft glow, try radial-gradient instead. Several stacked radial gradients with transparency often reproduce a “mesh” look.

This is approximate by nature. If the page itself uses CSS, the first method gives you the exact original.

Why is there no gradient in the stylesheet?

Common reasons: the gradient is built from CSS variables, set by JavaScript, drawn in a canvas or WebGL shader, or is part of an SVG. Search the computed value rather than the source file, and for shader backgrounds read the WebGL guide.

Where to go next

FAQ

How do I get the CSS gradient from a website?

Right-click the element, choose Inspect, and in the Styles or Computed tab find background-image. A value like linear-gradient(135deg, #7f7dfc, #f44bcc) is the whole gradient; copy it. To list every gradient on a page at once, use a gradient finder that reads the rendered page.

Can I extract a gradient from an image?

Not exactly. A gradient inside a photo or PNG is pixels, not a rule. You can approximate it: sample the color at the start, the middle and the end, estimate the angle, and write a linear-gradient() from those. The result is close, not identical, and banding in the image can make the angle hard to read.

Why can't I find the gradient in the stylesheet?

It may be set by JavaScript at runtime, built from CSS variables, drawn in a canvas or SVG, or be part of an image. The computed value in DevTools shows the final result of variables and scripts; search there, not only the stylesheet file.

What kinds of CSS gradients are there?

Linear (linear-gradient), radial (radial-gradient), conic (conic-gradient) and the repeating versions of each. A gradient finder reports which kind each one is.

Is a gradient on a website free to copy?

A gradient is a short list of colors and positions, and copying one from a page you are studying is ordinary practice. A distinctive full design built from it is a different matter; see the legal guide.