BUILT BY @aaronm67 (and @bgrins)
Tweet #gradientfinder
GradientFinder is a quick way to find a gradient from an image! Read More

Drop an image here!

To find its CSS gradient
Gradient from this Image:
Couldn't find a gradient from that image...

Gradient Generator

Move alpha or color stops by dragging them across the track.
Click on the track to add a new stop.
Pick your color and alpha stops.
Choose your angle.
Tip: If you hold shift, you can snap to 15 degree increments


Gradient Finder is an entirely in browser way to convert an image to its CSS gradient. You can also generate CSS gradients and make changes to the files you choose!

It was written by Aaron Marasco and Brian Grinstead

It was (partially) inspired by pngtocss. The main things that are different about GradientFinder is that it accepts more image types than pngs, it accepts arbitrary angles, and it can run in your browser!

Open Source:

The GradientFinder library is open source. To use it, include the script like so:

<script type="text/javascript" src="gradientfinder.js"></script>

Javascript View on Github


The following methods are exposed from the global GradientFinder object.

GradientFinder {
    fromUrl: function(url, onload),
    fromCanvas: function(canvas)


This is the signature of the methods exposed from the return object.

Gradient {
    stops: [ array ],
    angle: integer,
    toCss: function() // returns String


Here you can view a lot of gradient examples. They don't open until you press the button, because it can be slow to load them all at once!


(left is an image, right is the CSS Gradient of that image)