How does the gradient maker extract colors from an image?

The tool draws your image onto an HTML5 Canvas element, reads the raw pixel data using getImageData(), and runs a k-means clustering algorithm on those pixels. K-means groups similar colors together and finds the centroid (average color) of each group. Those centroids become the color stops in your gradient. The process runs entirely in JavaScript inside your browser — no image data is ever sent to a server.

What image formats are supported?

The tool accepts any image format your browser can decode, including JPEG, PNG, WebP, GIF, and AVIF. It does not support vector formats like SVG or PDF. For best results, use photos with distinct color regions — landscapes, product shots, and artwork tend to produce the most visually appealing gradients.

What does the "colors to extract" slider do?

This controls the number of clusters in the k-means algorithm, which directly determines how many color stops appear in your gradient. Setting it to 2 extracts just the two most dominant hues (great for simple two-color gradients). Setting it to 8 captures more subtle tones from the image. Values between 4 and 6 usually produce the most balanced gradients for typical photos.

Is my image uploaded to a server?

No. The entire process — image loading, pixel sampling, k-means clustering, CSS generation — runs inside your browser using the Canvas API and JavaScript. Your image is never sent to any external server. The tool works even if you disconnect from the internet after the page has loaded.

What is the difference between linear, radial, and conic gradients?

A linear gradient transitions colors along a straight line (e.g., left to right). A radial gradient starts at a center point and radiates outward in a circle. A conic gradient sweeps colors around a central point like a color wheel. All three are standard CSS gradient functions (linear-gradient, radial-gradient, conic-gradient) that work in all modern browsers.

Can I use the extracted palette in Figma or Tailwind?

Yes. Click "Copy" next to the Hex Palette to copy all swatch hex values as a comma-separated list. You can paste these directly into a Tailwind theme extension under "colors" as an array. In Figma, create color styles manually using each hex value. The CSS output can also be pasted straight into a Tailwind arbitrary value or any CSS property that accepts a gradient function.

Workspace

Drop an image here or click to browse

JPEG, PNG, WebP, GIF — processed entirely in your browser

Letters to Numbers

Trusted Conversion Tools

Gradient Maker from Image

Our free Gradient Maker from Image extracts dominant colors from any photo or illustration and turns them into a smooth CSS gradient in seconds. Upload a JPEG, PNG, WebP, or GIF — the tool samples the pixel data directly in your browser using the Canvas API, runs k-means clustering to find the most representative colors, and arranges them into gradient color stops sorted by luminance for a natural visual flow. Choose between 2 and 8 colors to extract, then select Linear, Radial, or Conic gradient type. For linear gradients, an 8-direction compass controls the angle. The Palette Swatches panel generates 3–12 discrete hex colors interpolated from your gradient — perfect for exporting to Figma, Tailwind, or any design system. Copy the full CSS background string or the complete hex palette list in one click. Every step runs entirely offline in your browser; no image data is ever uploaded.

Who Is It For?

UI/UX Designers

Matching website gradients to a brand photo or hero image by extracting its exact dominant colors and converting them to CSS.

Web Developers

Generating CSS gradient backgrounds that complement a product image or photography without manual color picking.

Brand Designers

Building consistent color palettes sourced directly from brand photography or mood board images.

Social Media Creators

Creating gradient backgrounds for posts, stories, and thumbnails that match the colors of a featured photo.

Digital Artists

Deriving color palettes from reference images or artwork to use in Figma, Sketch, or Adobe tools.

How It Works

Upload any JPEG, PNG, WebP, or GIF image. The tool draws it onto an HTML5 Canvas, samples the pixel data, and runs k-means clustering to identify the most dominant colors. Those colors are sorted by luminance and arranged as gradient color stops. Choose Linear, Radial, or Conic gradient type, set the direction, adjust the palette swatch count, and copy the CSS gradient string or hex palette with one click — all inside your browser.

Features

K-means color extraction from any uploaded image
Extract 2–8 dominant colors with adjustable slider
Colors sorted by luminance for a natural gradient flow
Linear, radial, and conic gradient types
8-direction compass for linear gradient angle
3–12 palette swatches generated through RGB interpolation
Click any color stop or swatch to copy its hex value
Copy CSS gradient string and hex palette list to clipboard
100% browser-based — image never leaves your device
No sign-up, no watermarks, no file size limits

Other Tools

Explore more tools by clicking the + button above

Letters to Numbers Converter

Convert letters to numbers using A1Z26 cipher

A1Z26 Translator

Translate letters to numbers with the A1Z26 alphabet

A1Z26 Decoder and Encoder

Encode letters to A1Z26 numbers and decode numbers back to letters instantly

A0Z25 Cipher Translator

Convert text using A0Z25 cipher encoding

A0Z25 Decoder

Decode A0Z25 encoded numbers back to letters instantly

Your Privacy Matters

All processing happens in your browser. We never store, send, or log your data. Completely private and secure.