← back to tools

Image → CSS Gradient

Upload an image. Get the dominant colours and ready-to-copy CSS gradient code instantly.

100% browser-based — images never leave your device
🎨

Drop your image here

or browse to upload — JPG, PNG, WebP supported

preview
linear-gradient
Extracted Colours — click any swatch to copy HEX
Gradient Type
Angle
deg
Colour Count

Why devs actually use this

Hero sections that match

Drop in your hero image. Get a gradient that blends perfectly into your background. No more eyeballing hex codes in Figma.

Multiple output formats

Copy as a bare background property, a full .css class, Tailwind JIT config value, or CSS variables for design systems.

Linear, Radial, Conic

Switch gradient type instantly. Conic gradients are great for pie-chart style overlays; radial for spotlight effects on dark hero images.

2–5 colour stops

Control how many palette colours go into the gradient. 2 is clean and bold; 4–5 creates a rich painterly effect. Try them all.