
Gradify turns the most prominent colors in an image into a CSS gradient - bemmu
http://gradifycss.com/
======
pmx
Really nice effect - I can see this being used on galleries / profiles, etc.
What is with the weird scroll behaviour on this page, though? It will refuse
to stay where I put it and keeps jumping to odd snap points after a few
seconds. Annoying.

~~~
stephenr
The hostile scrolling on the page makes it effectively unusable on mobile

~~~
ourmandave
This is why no one downloads the band _Hostile Scrolling_ 's app.

------
brownbat
I was just excited when I heard Paint will build a gradient if you shrink a
two-tone image to a pixel width and re-expand:

[http://www.instructables.com/id/Gradients-in-MIcrosoft-
Paint...](http://www.instructables.com/id/Gradients-in-MIcrosoft-Paint/)

------
DanBC
Do you have permissions to use those images?

[https://m.flickr.com/#/photos/lightofthewild/5611692322/](https://m.flickr.com/#/photos/lightofthewild/5611692322/)

The left margin is broken on Chrome on iOS.
[http://m.imgur.com/94fzJrc](http://m.imgur.com/94fzJrc)

The scrolling behaviour make the page impossible to use. The scrolling, and I
say this as politely as I can, is fucking horrible and makes me want to smash
my phone to little pieces.

Sorry for the negative tone. The actual thing looks cool. It'd be nice to see
these gradients being used more often.

~~~
kevinbowman
> Do you have permissions to use those images?

Wow, you're quite right - there's no attribution on any of the photos. Also,
since they're re-hosted onto tumblr it's hard to tell where they came from.

It's possible that the author may have taken all of the photos themself, but
unlikely given the example which you've pointed out. It's also possible that
the author has sought private permission to use the photos, but you'd probably
expect some attribution if that were the case.

~~~
logn
I think it would fall under fair use. This is a demo for an open source
project.

~~~
gnud
non-commercial use does not equal fair use.

------
ionforce
Why does the page keep jumping around?

------
Keyframe
You could blur the image as well. I have tried a similar approach with blur
quite awhile ago: [http://www.cssdesk.com/VYN67](http://www.cssdesk.com/VYN67)
Change the image URI to see it work on another image.

~~~
coob
The point with this method is that the gradient acts as a fill before the
image is loaded.

~~~
kuschku
Which one could combine with blurring.

Progressive JPEG with a blur filter depending on how much has loaded yet?

That would be the best solution, probably.

~~~
Keyframe
It's an interesting idea to put into a JPEG decoder directly.

------
CodeWriter23
Great idea!

Found a bug - it doesn't follow the "orientation" property of the image,
resulting in photos and gradients that are rotated.

I don't do Python myself, but using PerlMagick, the fix is
$magick->AutoOrient();

~~~
the8472
that property is non-standard. Many viewers don't respect it. So calling it a
bug is a bit much in my opinion. More of an RFE.

------
throwaway56789
To fix the horrible scroll (never, ever interfere with the scroll
functionality!!!) add this in the console / scratchpad etc.:

window.addEventListener("scroll", function(ev) { ev.stopPropagation(); },
true);

------
maggit
Is the author of this around? There's a rather prominent spelling mistake in
the first sentence; it says "prominant" where it should say "prominent" :)

~~~
dssddsds
cheers for the heads up, spelling ain't my forte!

------
Listen_up_buddy
Pretty!

Fix the scroll highjacking please.

------
mmahemoff
Nice tool. Looking at devtools, it generates a gradient in each direction
(left, right, top, bottom). Each of these gradients is a single color
transitioning from fully-transparent to fully-opaque.

The algorithm looks to be breaking the image into the 4 quadrants and finding
the dominant color in each quadrant (eliminating any shades that are too
gray). e.g. to get the color for the left-to-right gradient, it finds the most
dominant color on the right of the image.

------
Theodores
This is great for photos but not that useful with product images surrounded by
white space as that white space becomes a colour.

~~~
dssddsds
actually has a minimum distance from white, white is accepted if there's
literally nothing else

------
ohitsdom
Biggest site that uses this technique is pinterest. It's a pretty crucial UI
"trick", especially over slow internet connections. A user's pinterest home
page is mostly images, and if they didn't use this dominant color trick, the
page would look awful until things loaded.

------
the8472
> the 4 most common colors

maybe it would be better to weight pixels by the energy density of the image
region so that backgrounds (sky, walls) don't dominate the resultant colors
over the (usually more significant) foreground/detailed objects

~~~
dssddsds
I have a few todo improvements, but if you'd like to see this one
tested/implemented, add as an issue on the github!

------
franciscop
I was going to implement this myself in the future as I need something
similar. The main difference is that I thought of using an inline svg to have
more flexibility in the way gradients look and are positioned.

------
Moter8
Tried it out on an image that would be used on a realtor website. Doesn't look
too good in my opinion.

[http://i.imgur.com/WrbsRcM.png](http://i.imgur.com/WrbsRcM.png)

~~~
dssddsds
the js version (that example) isn't as good as the py version

------
frozenport
Would using a really large order polynomial be any more help? For example a
10th order best fit?

~~~
eru
Larger order polynomials usually just give you more `swing'.

------
rqk7sWvM
Why don't you just post the 5 or 10 lines of code you're using to create the
effect?

~~~
chronial
They are one click away and more like 200 lines:

[https://github.com/fraser-
hemp/gradify/blob/master/gradify.p...](https://github.com/fraser-
hemp/gradify/blob/master/gradify.py)

