How to Copy a Gradient from Any Website (Exact CSS in One Click)

Solid colors are easy to steal. Gradients are not. A modern hero gradient is rarely one simple declaration — it is often two or three layered backgrounds, each with its own angle, color stops, and opacity, blended over a base color. Reconstructing that by eye is guesswork; reconstructing it from DevTools is archaeology. This guide shows the manual pain first, then the one-click way to copy any gradient exactly as its CSS.

Why gradients are the hardest thing to copy by hand

Take a typical SaaS hero: a dark background with a violet-to-transparent radial glow top-left, a subtle orange linear wash bottom-right, and a fine grid overlay. In CSS that is three stacked background layers. To copy it manually you must:

1. Find the exact element carrying the backgrounds (often a wrapper div, not the section you clicked).
2. Read each layer's declaration in the computed styles — angles in degrees, stops in percentages, alpha values in rgba/hsla.
3. Keep the layer order right: CSS paints the first background on top, so reversing two layers changes the result.
4. Copy every value without typos, then verify visually side by side.

Miss one stop position by 10% and the gradient looks "off" in a way you cannot quite name. This is the single most error-prone copy job in front-end work — and the one where our guide on inspecting CSS gradients leaves off: inspecting tells you what is there, but you still have to transcribe it.

A real layered-gradient example

Here is the kind of declaration hiding behind a polished hero section — three layers, each doing one job:

.hero {
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(94,106,210,0.35), transparent 70%),
    linear-gradient(135deg, rgba(255,106,0,0.12) 0%, transparent 55%),
    #0F1015;
}

The radial glow, the diagonal wash, the base color — in that order. Transcribe any of the three wrong and the hero loses its depth. Now imagine doing this for every gradient on a page you are using as reference.

The 1-click method

1. Install ChromaPick from the Chrome Web Store (free, no account — 5 extractions/month).
2. Open the website and click the extension icon. ChromaPick detects each gradient on the page with its full definition: gradient type (linear, radial, conic), angle or position, every color stop, and each layer's opacity.
3. Copy the gradient CSS. Layered gradients come out as a complete, ordered background declaration — paste it straight into your stylesheet and it renders identically, because the values are the computed ones, not approximations.
4. Make it yours. Shift the hue, change the angle, drop a layer. Starting from an exact copy beats starting from a blank gradient generator every time.

What "exact" actually means here

Two details separate a real gradient copy from an eyeballed one. First, stop positions: a stop at 55% versus 70% is the difference between a soft wash and a hard band, and humans are bad at judging percentages visually. Second, alpha values: a glow at 0.35 opacity over dark looks nothing like the same hue at full opacity, and eyedroppers only ever give you the blended result. Computed-CSS extraction preserves both, which is why the pasted gradient matches the original pixel-for-pixel.

Taking gradients into your stack

Raw CSS is the universal format, but most teams want the gradient inside their system. On Pro ($10 one-time), ChromaPick exports gradients alongside the palette as code — Tailwind-ready values and CSS variables you can drop into a config. Pair this with converting website colors to Tailwind CSS and a reference site becomes a starter theme in minutes. If you are building a full token set rather than grabbing one gradient, the design-token extraction guide covers the end-to-end pipeline into Figma Variables.

A note on using others' gradients

Copying a gradient's technique for learning and inspiration is standard practice; shipping a pixel-identical copy of a brand's signature hero is not a great look. Treat extracted gradients as starting points — adjust the palette, angle, or composition until the result is yours.

Radial and conic gradients: what changes

Linear gradients are the easy case — one angle, a row of stops. Radial gradients add shape and position (ellipse 60% 50% at 20% 0%), which control where the glow sits and how far it spreads; get the position wrong and the light source appears to move. Conic gradients (used for pie charts, color wheels, and angular effects) rotate around a center point, so the from angle is the value that matters most. The manual transcription pain multiplies with each type because there are simply more numbers to get right — which is also why one-click extraction pays off fastest on non-linear gradients.

One more honest caveat: some sites render gradients on <canvas> or as images rather than CSS. No CSS reader can extract those as code — for those, an eyedropper plus a gradient generator remains the practical fallback. If the gradient lives in the stylesheet, though, computed-CSS extraction is exact every time.

Related guides

• How to Inspect CSS Gradients — understand what you are looking at before you copy it.
• How to Extract Color Palettes from Any Website — grab the solid colors behind the gradients too.
• Convert Website Colors to Tailwind CSS — take extracted styles into code.