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.
Drop an image on this sheet
or paste one with Ctrl+V (⌘+V on a Mac)
JPEG, PNG, WebP, GIF, AVIF or SVG. The image stays on your device.
Drag across the image to draw a line, or focus handle A or B and move it with the arrow keys (Shift for bigger steps).
Your gradient
background: linear-gradient(90deg, …);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.