---
title: "Gradient From Image: CSS Gradient Generator | Click Petal"
description: "Draw a line across a photo and turn the colors along it into a CSS linear gradient. Choose stops and blending, copy the CSS or download a PNG."
url: https://clickpetal.click/gradient-from-image/
---

Specimen no. 05 · the stem

# Gradient from image

Draw a line across a sunset, a petal or a painting, and the colors along it become a CSS gradient you can paste straight into your stylesheet.

## From a line to a gradient

Drag across the picture to lay down a line, then fine-tune its ends by dragging handles A and B. The tool takes evenly spaced **sample points** along the line, averages a small **sample area** at each one to smooth out photo grain, and writes the colors as stops of a CSS `linear-gradient`.

**Direction** either follows the angle of your line or lays the gradient straight across or down. **Blend** chooses how the browser mixes between stops: sRGB is the classic behavior, while OKLab keeps the middle of the blend bright instead of passing through a muddy grey. The OKLab version uses the newer `in oklab` syntax, so the CSS also includes a plain line first for older browsers.

**Drop stops the gradient already makes** removes any stop that the blend between its neighbors would reproduce within a just-noticeable difference, which keeps the CSS short without changing how it looks.

## Questions

**Why is the middle of my gradient muddy?**

Blending two saturated, opposite colors in sRGB passes through grey. Switch the blend to OKLab, or raise the number of sample points so the line's own middle colors are kept.

**Will the gradient match the image exactly?**

It matches the colors at the sample points. In between, the browser blends smoothly, so texture and sharp edges along the line are lost. More points follow the image more closely.

**Can I use the PNG as a wallpaper?**

Yes. The download is a 1920 × 1080 PNG of the gradient at its current angle and blend, rendered in your browser.