Show HN: I've made a tool to generate beautiful gradient background images
gradient.quasi.ink
gradient.quasi.ink
Rather scroll through 1KB than 2MB.
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.
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://signalvnoise.com/posts/2991-behind-the-scenes-ab-tes...
"Big photos of smiling customers work"
"Normal" users buy more in the spirit of "no one was ever fired for buying Microsoft": since they lack other means of assessment, or have no time to carefully read the actual content, they fall back on things like nice photos. And they are a good proxy, as they compare it to advertisements of their local shops or yard sales. They dont know about stock photos. They just see a professional photo.
And to be clear: Even me as developer would take such things into account. I have incomplete information, so I use proxies. Especially if I am in a hurry.
A splash image doesn't add much either, I agree, unless you layer other pieces on it so it looks more sophisticated and sets a mood (e.g. https://www.onelogin.com/).
But yes, just a simple splash image with centered tagline text and CTA buttons is very cliche at this point. My mind is too warped by being a developer to know whether average consumers care or not, but most techies will assume it's a weekend prototype, not a serious project.
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.
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.
Would you be able to generate an arbitrarily sized PNG or JPEG download from them?
59 lines of code
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.
Chrome and Safari produce smooth images. Firefox for Mac produces a mosaic (source each pixel gets a ~10x10 grid, it looks pretty good IMO). Firfox for Android may not do any smoothing.
I don't think there's a way to control how the browser does the filtering.
https://css-tricks.com/almanac/properties/i/image-rendering/
I'd like to add something like this to: http://projects.skratchdot.com/infinite-gradients
I'll at least add a link to https://github.com/tiborsaas/unique-gradient-generator in the README...
Readme will improve and I'll certainly link to your project, I like it a lot.
I'll submit a PR after editing this (if you wanna accept it): https://github.com/tiborsaas/unique-gradient-generator/blob/...
Trying to add a randomize() function that edits topX, topY, and sampleArea. Might add a button to dat.gui or maybe just call it based on pressing the 'r' key.
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)?
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
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/ (Refresh the page to see a different background).
[1] https://www.agitraining.com/sites/default/files/PSE3793.png
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.
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?
If the source image is copyrighted, then the gradient can't be used without a license from the original owner.
(It's an interesting question, though, whether copyright protection can be expected to "scale" down to a 3×7 pixel subset of an image. At what point does it stop being a derivative?)
(It's a ThemeForest template.)
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.