
Show HN: I've made a tool to generate beautiful gradient background images - kowdermeister
http://gradient.quasi.ink
======
lewisl9029
Not completely on-topic, but I wish more designers would consider using some
kind of gradient or custom vector graphics for their landing page designs
instead of defaulting to multi-megabyte stock images that, for the most part,
don't even add anything of value to what they're trying to convey.

~~~
mduerksen
They do convey something very important: credibility.

Or, at least, they coerce the fast pace internet viewer into having that first
impression. I know its silly, but the average viewers mind will subconsciously
attribute more effort and quality - thus, credibility - to a polished photo
than to any gradient.

It sadly does not make a difference if its merely a stock photo bought for a
few bucks. It still works.

Also, a photo gives a more "real", less abstract impression, so the target
customer can relate. You can't relate to a gradient. So the photo should be
chosen according to the target customer.

I agree though that some effort should also be put into technical aspects,
e.g. making the photo file size as small as possible.

~~~
lewisl9029
I personally believe credibility at first impression has more to do with the
overall polish and quality of your design than the existence of a photo.

Sure, adding a photo might be an easy shortcut to fabricate the illusion of
quality, but it's a shortcut that also has severe adverse effects on UX in
bandwidth constrained environments, which actually has the opposite effect on
perceived quality, and thus credibility, than the designer intended. This is
why I believe it's worthwhile to explore alternative designs that don't rely
on photos, at least once you're past that MVP phase where you just want to put
something together as quickly and easily as possible.

RE: You can't relate to a gradient. This is true enough, but there's no reason
why you need to make users relate to a background image, when you can have
them relate to something in the foreground like some kind of feature showcase
of your app/service (with screenshots and such). A busy stock photo in the
background is actually detrimental to this kind of design compared to
something simple like a gradient. And in my opinion, this kind of design is
much more directly relatable for users because you're presenting your value
proposition to users explicitly rather than relying on your users being naive
enough to fall for some subliminal mind trick.

Stripe's landing page is one good example I can recall of such an approach:
[https://stripe.com](https://stripe.com)

~~~
prawn
37 Signals split-tested various home page designs a while back and from memory
it was the one with the large smiling face that was most successful.

~~~
nostromo
Here it is:

[https://signalvnoise.com/posts/2991-behind-the-scenes-ab-
tes...](https://signalvnoise.com/posts/2991-behind-the-scenes-ab-testing-
part-3-final)

"Big photos of smiling customers work"

~~~
togedoge
Sure, but now look at Highrise's visual approach. We know that they have A/B
tested in the past, so I am going out on a limb to say that they continue to
do so. They have a human element in their hero image on their homepage, and
they include an image of a smiling influencer near the top. I'd reaffirm what
others have said and test for your audience! I am not affiliated with business
of the case study in the link you posted.
[https://highrisehq.com/](https://highrisehq.com/)

------
jameslk
There's also the CSS property `filter: blur(<length>)` which basically has the
same effect with a high enough length value. Not every browser supports it
yet, of course (i.e., IE). Still, kudos to the author for the clever idea.

[https://developer.mozilla.org/en-
US/docs/Web/CSS/filter](https://developer.mozilla.org/en-
US/docs/Web/CSS/filter)

[http://caniuse.com/#feat=css-filters](http://caniuse.com/#feat=css-filters)

~~~
mortenjorck
I would suggest using this in _conjunction_ with the scaled-up image technique
in order to get the same blur effect cross-browser (see the posts elsewhere in
the comments about bilinear vs. bicubic scaling)

------
spyder
In Firefox the gradient is not as smooth as in Chrome, looks like they are
using different scaling algorithms. It's more noticeable with higher sample
area settings:

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

~~~
jameslk
In my Firefox (v43, El Capitan, Retina screen, Electrolysis-enabled), it looks
completely pixelated:

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

~~~
mintplant
It looks this way on Chrome for Android as well. I thought this was the
intended effect.

------
bhauer
Clever idea to use a dramatically zoomed image to allow for a variety of
"stops" in the gradient!

I've used random CSS gradient backgrounds on my personal blog for some time
[1]. The "background options" at the left includes a couple grays and a random
colors option. The randomness is recomputed each time you click on one of the
options.

In IE 10 and 11, the only browsers that I am aware of that do gradient
transitions, they slowly animate.

[1] [http://tiamat.tsotech.com/](http://tiamat.tsotech.com/)

------
forrestthewoods
This is not beautiful. It's ugly. The lines are very harsh. No artist would
make something that looks like this.

Props for the effort. It was clever idea. But it didn't work. I'm sorry.

The word beautiful is wildly, wildly overused. Everyone claims everything is
beautiful these days. But that is not the case.

~~~
jpindar
What lines? I don't think you are seeing what the rest of us are - can you
share a screenshot?

------
rrauenza
This may be counter to your original design intent, but I know people who
would like to put these gradients into powerpoint.

Would you be able to generate an arbitrarily sized PNG or JPEG download from
them?

~~~
ryanmonroe
In the meantime, you can always just load the html and delete the div elements
for text and controls (to take a screenshot). Obviously this makes the
"arbitrarily sized" part harder but now I have a nice wallpaper for my phone.

~~~
kowdermeister
If you press escape you can hide all the UI, I added this feature for
screenshots.

------
SeanDav
This used to be a well known technique by windows users to save memory and
resources, back in the day when the desktop background could have an impact on
system performance. The trick was to have a background of an image of a few
pixels square and use the "Stretch to fit" option, which created beautiful
soothing backgrounds, but only take a few bytes of memory.

~~~
detaro
Did that actually have an effect, since the full-size interpolated version had
to be in memory anyways?

~~~
foldr
It might have only had to have been in video memory. Depends on exactly what
kinds of blitting operation were available.

------
IvanK_net
I made similar thing few years ago, but with more effects (click to randomize
gradient effect)
[http://lib.ivank.net/demos/plasma.html](http://lib.ivank.net/demos/plasma.html)

59 lines of code

------
cardamomo
This doesn't seem to work for Firefox on Android. Instead, I see three giant
pixels, with a discrete border between them.

~~~
lqdc13
Hacker news comments section doesn't work on Firefox on Android either.

~~~
mintplant
They don't work on desktop Firefox either, if you make the window small
enough.

I always thought the staff had, for some reason, decided that mobile users
didn't need to know which comment was part of which thread.

------
ycombobreaker
The gradients look nice, but a nitpick about the site: Alt+LeftArrow and
Alt+RightArrow are hijacked by the site to scroll! This is a shortcut for
back/forward in browser history, and apparently I use it without thinking,
because I just had a rather jarring experience trying to get back to the HN
comments page.

------
BinaryBullet
Good job on this- very cool. I think it'd be a nice addition to have a
"randomize settings" button, or perhaps allow a "travel" mode where the x/y
positions change in smaller increments (so the background changes a bit
slower).

I'd like to add something like this to:
[http://projects.skratchdot.com/infinite-
gradients](http://projects.skratchdot.com/infinite-gradients)

I'll at least add a link to [https://github.com/tiborsaas/unique-gradient-
generator](https://github.com/tiborsaas/unique-gradient-generator) in the
README...

~~~
pygy_
The x/y increment resolution is a limit of the technique used. It uses
overzoomed images, you scroll one source pixel at a time. Since it uses
`background-size: cover;` for rendering, you cant scroll by fractions of
pixels.

~~~
BinaryBullet
Ah, that makes sense. I thought it was just that the dat.gui step was set to
'1' not '0.01'. Didn't realize the step was set that way puposely due to a
limitation of the technique being used.

------
namuol
Were you by any chance inspired by Medium's approach to pre-loaded thumbnails?

~~~
kowdermeister
I've read about that before, so there's a chance it planted a seed in my
brain, but the idea for the tool came from a codepen experiment I did a few
months ago.

------
Negative1
I love this -- Nicely done!

Does anyone know; is the smoothing guaranteed to be consistent across multiple
browsers (I'm guessing it's done on GPU when possible with a software fallback
and is probably just a bilinear filter)?

------
accordionclown
awesome.

i often shoot pictures of the sky, a forest canopy, or other natural
phenomenon, to get this kind of gradient. but this is even better, in many
ways.

one suggestion is to feather the edges into each other, a la the "seamless"
background patterns of yesteryear, to soften them if/when the background
repeats, because background-size:cover doesn't handle very long elements, like
"body", without having the background-image repeat.

good work.

-bowerbird

------
euph0ria
I just tried this adding it to a page. When I drag the window so the width is
not very large compared to the height the image clips/repeats. Is that the
intended behavior (Chrome)? Added the CSS directly to the body of the page.
Example here: [https://jsfiddle.net/r1ueprrz/](https://jsfiddle.net/r1ueprrz/)

~~~
kowdermeister
Not really, that's not how it's supposed to work, seems like a bug, but a
'min-height: 100%' solves the problem.

~~~
euph0ria
Tried that in the fiddle but didn't make a difference?

~~~
euph0ria
Put it on html and body and now it works. Thanks!

------
pteredactyl
In this context "designers" are more accurately labelled as "graphic
designers." Thank you.

------
Aardwolf
Bilinear filtering doesn't look that great to me, is there a way to get
bicubic interpolation or similar?

------
chrisallick
If you love gradients and randomness:
[https://chrome.google.com/webstore/detail/random-
gradient/ga...](https://chrome.google.com/webstore/detail/random-
gradient/gaklopmcfgbcdnehdleeocjfhaipajgf?hl=en-US)

~~~
Ao7bei3s
If you love horrible banding effects...

------
fratlas
This is wonderful. I hope gradients become more regular in web design. I wrote
an image -> css gradient converter last year [https://github.com/fraser-
hemp/gradify](https://github.com/fraser-hemp/gradify)

------
thekingshorses
This is awesome.

If you need cross browser solution and if you don't mind using JS, then you
can use canvas to blur images. Its not good as this.

Demo: [http://premii.com/](http://premii.com/) (Refresh the page to see a
different background).

~~~
x0
Ooh, is that your site? That's sharp as hell, very nicely designed. I'm going
to take a screenshot and add it to my inspiration folder.

------
mistercow
When I did a stylesheet something BeeLine-esque for Calibre, I did something
similar for the text fill gradient
([https://gist.github.com/osuushi/6461324](https://gist.github.com/osuushi/6461324))

------
jeremyleach
This is really nice. It could be interesting to also add a thumbnail of the
chosen image on the page. That would instantly give the effect that the
background color/gradient had been chosen to match the image (which of course
it had :) ).

~~~
riebschlager
I second this idea! Maybe a photoshop "navigator" panel [1] would be kinda
cool.

[1]
[https://www.agitraining.com/sites/default/files/PSE3793.png](https://www.agitraining.com/sites/default/files/PSE3793.png)

------
kinduff
Lovely app, I like this type of gradient backgrounds.

Came to my mind the decision you made to not be able to generate a custom link
for uploaded images, and I wonder, is there a way to achieve this? Considering
that the base64 length hits the URL size limit.

~~~
kowdermeister
Thanks :) It can be done, but the because of URL limits, the image should be
saved. I plan to allow full scale downloads and I might just store custom
uploads too.

------
pbnjay
Can the sample size be done in percentage points (of the source image)? I
think some of your example images are higher resolution than others so it
takes a lot of fiddling to find similar results.

~~~
kowdermeister
That's a good idea, I'll add it soon. Yes, example images vary in resolution,
I scaled them to have a dense visual complexity. The idea is a bit revolving
around chaos, you never know what you discover :)

------
kyberias
Is this guaranteed (by web standards) to show correctly on all browsers?

------
city41
Neat tool, I'll probably use it on my next website. I like the keyboard
controls to move the image, but I also found myself intuitively trying to drag
the image around with my mouse.

------
CharlesW
This is a really great idea. In addition to using existing images, would it be
possible to create interesting patterns and textures procedurally using
canvas.toDataURL()?

~~~
kowdermeister
Sure, yesterday I just had an idea to enable WebGL shaders as an input, but I
have to research the idea a bit further.

------
rcurry
That's awesome - nice work, and thanks for sharing it.

------
nailer
Nice technique in terms of now having too much noise. Could be great to limit
brightness (or darkness) for better contrast with text.

------
stuaxo
Pretty sure people used the same idea in Windows 95 with active desktop to
make a gradienty background.

------
inlineint
It is a bit slow: when I load page the background appears black and then
becomes gradient.

~~~
pygy_
It's a demo/app to generate backgrounds. It produces CSS with a `background-
image: url(data:tiny-image-here)` that should load instantly.

------
troymc
The image is a derivative work; it's derived from the original stock image.

If the stock image is protected by copyright, and you don't have a license to
use it (for anything), is it copyright infringement to use it like this on
your website?

Or is it fair use?

~~~
tdumitrescu
According to the page: "The images used in the project are all public domain
stock images."

~~~
pygy_
Indeed, but it is derivative, not fair use. If the source can be used and
modified freely (public domain, appropriate Creative Commons subtype), then it
is also the case for the gradient.

If the source image is copyrighted, then the gradient can't be used without a
license from the original owner.

------
amelius
Any examples of pages where such an effect is used in practice?

~~~
fractallyte
Here: [http://www.riaxe.com/marketplace/thin-
admin/index.html](http://www.riaxe.com/marketplace/thin-admin/index.html)

(It's a ThemeForest template.)

------
atriantafy
Love it. I'll definitely use it. Thank you!

------
fiatjaf
Not very beautiful.

------
sandworm101
>> The browser's image smoothing algorithm takes care of the rest.

So it doesn't survive noscript? Without scripts the OP is just a black
background. Call me old, but I'd rather be sent the png.

~~~
Sir_Cmpwn
The tool requires javascript, the final result does not.

~~~
sandworm101
Ah, that makes more sense.

------
thatguyyouknow
I find this to be a good source of gradients/colors, but it's just images (no
CSS generation):
[http://colorfulgradients.tumblr.com](http://colorfulgradients.tumblr.com)

