Image → CSS Gradient

Turn an image into a linear CSS gradient using its dominant colors.

Tool Media & Files Updated Apr 19, 2026
X Facebook LinkedIn Reddit Email
How to Use
  1. Drop image.
  2. Pick stop count + angle.
  3. Copy CSS.
Image
▇
Drop image
Gradient preview
—

Notes

Stops
Sampled by luma
Angle
CSS convention
CSS
linear-gradient(…)
Browser
All modern
Swap order
Reverse by changing angle
Privacy
Local

Frequently Asked Questions

How chosen?

Image is downsampled to a line; colors sorted by luma for a smooth gradient.

Common Use Cases

Hero BG

Quick gradient from photo.

Last updated: