Online Tool Store
Gradient Extractor
Draw a line across a photo or design and get a CSS linear-gradient with matching color stops at their real positions, or a Tailwind class. No upload.
This works right here on your device — nothing gets sent out.
Image — drag across it to set the gradient line
or paste with Ctrl+V. Nothing is uploaded.
Example shown — paste, drop, or choose your own image to replace it.
Extracted gradient
How Gradient Extractor works
- Paste, drop or choose an image with a gradient — a photo of the sky, a design screenshot, a brand graphic.
- A sampling line from A to B is placed along the direction where colour changes most. Drag across the image to draw your own, or drag A or B to adjust it.
- The tool reads colours along the line and keeps only the stops needed to reproduce it, shown as swatches with their positions.
- Copy the result as a CSS background or a Tailwind class.
The method
The angle of your line becomes the gradient angle, using the CSS convention where 0deg points up and angles turn clockwise. The tool then averages the colour at 97 evenly spaced points along the line and works out where each one falls on the CSS gradient line, which runs through the centre of the box and is long enough for 0% and 100% to touch the far corners:
gradient line length = |W × sin A| + |H × cos A|
To choose stops, it starts with the two ends of the line, then repeatedly adds the sample that a straight blend between the current stops predicts worst, until every sample is within a small colour distance. Example: a horizontal line across a 640px-wide image runs at 90deg, the gradient line is 640px long, and a colour 256px from the left edge becomes a stop at 40%.
FAQ
How do I extract a gradient from an image?
Paste, drop or choose the image. The tool picks the direction where colour changes most and draws a sampling line; drag across the image to set your own. The CSS linear-gradient updates as you drag, ready to copy.
Why are the stop percentages not just 0%, 50% and 100%?
Each stop is placed where its colour actually sits on the CSS gradient line for a box the size of your image, so a colour two-fifths of the way across lands at 40%. Applied to an element with the same aspect ratio, the gradient lines up with the original.
How many color stops should I use?
Auto keeps adding stops only while they improve the match, up to eight, so a simple two-colour fade stays at two stops. Choose a fixed number if you want a specific count — for example two stops for a minimal button background.
Can I get a Tailwind class instead of CSS?
Yes. Switch Output to "Tailwind class" to get an arbitrary-value class such as bg-[linear-gradient(90deg,_#1e3a8a_0%,_#fde68a_100%)], which works in Tailwind CSS v3 and v4.
Does it work on photos, not just flat design gradients?
Yes. Colours are averaged over a 5 × 5 pixel block at each sample point, so grain, JPEG noise and texture are smoothed out. Busy photos with objects in the way give a looser match — draw the line across a clean area such as sky or a wall.
Is my image uploaded?
No. The image is read on a canvas in this browser tab, and every calculation runs on your device.
How we compare
| Feature | Online Tool Store | devtool.tech Image to CSS Gradient | FreeGradient Image to Gradient |
|---|---|---|---|
| Choose where to sample | Draw a line at any angle | Direction option | Drag sample handles |
| Stops placed where colours sit in the image | Yes — CSS gradient-line maths | Not stated on its page | Not stated on its page |
| Paste an image from the clipboard | Yes | Yes | Yes |
| Image processed in your browser | Yes | Not stated on its page | Yes |
If you want a CSS gradient that matches the image it came from — same angle, stops in the right places — Gradient Extractor measures it for you, right in this tab.