How to Extract a CSS Gradient From an Image

You’ve found the exact sunset you want behind your hero section: pale blue fading through a soft cream into warm orange. Or a client has sent a brand graphic with a gradient and no style guide, and the developer needs it in CSS by this afternoon. Either way, the gradient exists as pixels and you need it as code.

The usual approach is to open a color picker, click the top of the image, click the bottom, and write linear-gradient(#a3b8c8, #f5a623). It almost works. Then you put it next to the original and the middle is wrong. The real gradient passes through a color your two-stop version skips, or the orange takes over at 70%, not 50%.

What extracting a gradient actually involves

A CSS linear-gradient has three parts: an angle, a list of color stops, and each stop’s position as a percentage. To match an image you need all three.

• The angle is the direction the color changes in. CSS measures it from 0deg pointing up, turning clockwise, so 90deg runs left to right and 180deg runs top to bottom.
• The stops are the colors the gradient passes through. A clean two-color fade needs two. A sunset might need four or five.
• The positions say where along the gradient line each color sits. This is the part most people guess.

The positions are trickier than they look. CSS doesn’t measure them along the edge of the box. It measures them along a gradient line that runs through the centre and is just long enough for 0% and 100% to touch the far corners. A stop at “40%” only lines up with the image if it was measured the same way.

Why people get stuck here

• Two clicks miss the middle. Most real gradients aren’t a straight blend between two colors. They bend through a third color, and a two-stop version flattens it.
• Guessed positions drift. Spacing stops evenly at 0%, 50% and 100% moves colors away from where they sit in the image.
• Photos are noisy. A single-pixel color pick from a JPEG sky can land on grain or a compression artifact, giving you a slightly wrong shade.
• Diagonal gradients are hard to measure. Working out the angle and how the gradient line stretches across a rectangle by hand is real geometry.

What a good extraction looks like

You choose where to sample

You should be able to draw the sampling line yourself: across clear sky rather than through a tree, or corner to corner on a diagonal brand graphic. A sensible starting line, along the direction where color changes most, saves a step.

Only the stops you need

More stops isn’t better. A good tool adds stops only while they improve the match, so a simple fade stays at two stops and a sunset gets the four or five it needs. Sometimes you’ll want to cap it, for example at two stops for a minimal button background.

Positions measured the CSS way

Each stop should land where its color actually sits on the CSS gradient line for a box the size of your image. Then the gradient lines up with the original when you apply it to an element with the same aspect ratio.

Common mistakes to avoid

• Sampling through objects. A line that crosses a building, a face or a logo pulls those colors into your gradient. Draw it across a clean area such as sky or a wall.
• Applying it to a different shape. Gradient positions depend on the box. A gradient taken from a wide banner will look different on a square card. Sample from an image with roughly the same aspect ratio as the element you’re styling.
• Forcing too many stops. Eight stops on a simple two-color fade just makes the CSS harder to read and edit, with no visible gain.
• Ignoring direction. A sunset fades top to bottom. Sampling left to right gives you one nearly flat color.

How to do it with Gradient Extractor

Gradient Extractor reads your image on a canvas in your browser tab, and every calculation runs on your device.

1. Paste, drop or choose an image with a gradient: a photo of the sky, a design screenshot, a brand graphic.
2. A sampling line from A to B is placed along the direction where color changes most. Drag across the image to draw your own, or drag A or B to adjust it.
3. Leave stops on Auto (up to 8), or set a fixed number if you want a specific count.
4. Check the swatches and their positions under the extracted gradient. They update as you drag.
5. Copy the result as a CSS background, or switch to Tailwind class to get an arbitrary-value class such as bg-[linear-gradient(90deg,_#1e3a8a_0%,_#fde68a_100%)].

Under the hood, the color is averaged over a 5 × 5 pixel block at each of 97 points along your line, which smooths out JPEG noise and grain. Then stops are added one at a time where a straight blend between the current stops is furthest off. For example, on a 640px-wide image, a horizontal line runs at 90deg, and a color 256px from the left edge becomes a stop at 40%.

Once you have the code, you can fine-tune it in the CSS Gradient Generator. Our guide on building a CSS gradient visually covers that side. If you need just one exact color from the image, see how to pick a color from an image.

Frequently asked questions

How do I get the gradient colors from an image?

Draw a line across the gradient in the image and read the colors along it. Gradient Extractor does this automatically, returning the stops with their positions as ready-to-paste CSS.

Why aren’t my stops at 0%, 50% and 100%?

Because each stop is placed where its color actually sits on the CSS gradient line. If the cream band in your sunset is two-fifths of the way across, it lands at 40%, which is what makes the result match the original.

Can I extract a gradient from a photo, not just a flat design?

Yes. Averaging each sample over a small block of pixels smooths out grain and compression noise. Busy photos with objects in the way give a looser match, so sample across a clean area like sky.

Final thought

If the gradient matters enough to copy, measure it rather than eyeballing two endpoints. Sample along the real direction of the fade, let the stop count follow the image, and apply the result to a box with a similar shape.

Try the free Gradient Extractor