11 ms·
Show HN: I've made a tool to generate beautiful gradient background images
- pbnjay 11y agoCan 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 11y agoThat'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 :)
- kinduff 11y agoLovely 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 11y agoThanks :) 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.
- inlineint 11y agoIt is a bit slow: when I load page the background appears black and then becomes gradient.
- pygy_ 11y agoIt's a demo/app to generate backgrounds. It produces CSS with a `background-image: url(data:tiny-image-here)` that should load instantly.
- nailer 11y agoNice technique in terms of now having too much noise. Could be great to limit brightness (or darkness) for better contrast with text.
- CharlesW 11y agoThis 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 11y agoSure, yesterday I just had an idea to enable WebGL shaders as an input, but I have to research the idea a bit further.
- amelius 11y agoAny examples of pages where such an effect is used in practice?
- kowdermeister 11y agoNot yet, I published this tool yesterday.
- fractallyte 11y agoHere: http://www.riaxe.com/marketplace/thin-admin/index.html http://www.riaxe.com/marketplace/thin-admin/index.html (It's a ThemeForest template.)
- deleted 11y ago[deleted]
- jeremyleach 11y agoThis 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 11y agoI 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
- bhauer 11y agoClever 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/
- pg_is_a_butt 11y agobeautiful does not mean what you think it means.
- cardamomo 11y agoThis doesn't seem to work for Firefox on Android. Instead, I see three giant pixels, with a discrete border between them.
- lqdc13 11y agoHacker news comments section doesn't work on Firefox on Android either.
- mintplant 11y agoThey 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.
- pygy_ 11y agoIt's actually a very low resoluton image (3x7 by default), stretched using the bilinear filtering provided by the browser. 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.
- kowdermeister 11y agoYou can, using the 'image-rendering' property, but on Mac FF this appears to have no effect. https://css-tricks.com/almanac/properties/i/image-rendering/ https://css-tricks.com/almanac/properties/i/image-rendering/
- pygy_ 11y agoThe options are basically "smooth" and "don't smooth". Firefox for Mac in "smooth" mode doesn't smooth engough...
- tombrossman 11y ago
- accordionclown 11y agoawesome. 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
- kyberias 11y agoIs this guaranteed (by web standards) to show correctly on all browsers?
- SeanDav 11y agoThis 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.
- deleted 11y ago[deleted]
- troymc 11y agoThe 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 11y agoAccording to the page: "The images used in the project are all public domain stock images."
- pygy_ 11y agoIndeed, 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.
- deleted 11y ago[deleted]
- rzzzt 11y agoThe "title" attribute of each image contains a link to the source. The second image (lightning) that I've randomly followed is licensed CC0. (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?)
- sandworm101 11y ago>> 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 11y agoThe tool requires javascript, the final result does not.
- sandworm101 11y agoAh, that makes more sense.
- lewisl9029 11y agoNot 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.
- sccxy 11y agoAgree Rather scroll through 1KB than 2MB.
- mduerksen 11y agoThey 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.
- rokhayakebe 11y agoCorrect. They say "If truth was self evident, eloquence wouldn't be needed." Unfortunately most websites could be reduced to just text and no images, external css files, jquery, and more. However when the average consumer lands on such website they will not trust it or take it seriously.
- lewisl9029 11y agoI 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
- rrauenza 11y agoThis 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?
- kowdermeister 11y agoGood idea and yes, it's certainly doable and it's on the todo list.
- ryanmonroe 11y agoIn 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 11y agoIf you press escape you can hide all the UI, I added this feature for screenshots.
- BinaryBullet 11y agoGood 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_ 11y agoThe 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 11y agoAh, 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.
- kowdermeister 11y agoThanks, this will be a great addition. You can navigate with your arrow keys currently. Readme will improve and I'll certainly link to your project, I like it a lot.
- BinaryBullet 11y agoI just noticed that :) Was working on adding a randomize button, but having trouble building. Are you using gulp or webpack or a combination? I'll submit a PR after editing this (if you wanna accept it): https://github.com/tiborsaas/unique-gradient-generator/blob/gh-pages/js/controller.js 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.
- euph0ria 11y agoI 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 11y agoNot really, that's not how it's supposed to work, seems like a bug, but a 'min-height: 100%' solves the problem.
- rcurry 11y agoThat's awesome - nice work, and thanks for sharing it.
- chrisallick 11y agoIf you love gradients and randomness: https://chrome.google.com/webstore/detail/random-gradient/gaklopmcfgbcdnehdleeocjfhaipajgf?hl=en-US https://chrome.google.com/webstore/detail/random-gradient/ga...
- Ao7bei3s 11y agoIf you love horrible banding effects...
- namuol 11y agoWere you by any chance inspired by Medium's approach to pre-loaded thumbnails?
- kowdermeister 11y agoI'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.
- markdown 11y agoIt's a very old trick. Certainly not invented by Medium.
- thekingshorses 11y agoThis 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 11y agoOoh, 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.
- city41 11y agoNeat 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.
- Aardwolf 11y agoBilinear filtering doesn't look that great to me, is there a way to get bicubic interpolation or similar?
- forrestthewoods 11y agoThis 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 11y agoWhat lines? I don't think you are seeing what the rest of us are - can you share a screenshot?
- spyder 11y agoIn 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 11y agoIn 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
- javajosh 11y agoSpeaking personally, I kind of like the effect!
- mintplant 11y agoIt looks this way on Chrome for Android as well. I thought this was the intended effect.
- deleted 11y ago[deleted]
- such_a_casual 11y agoYeah, I thought it was a joke. I'm glad the grandparent pointed out that it could be a browser issue.
- cpeterso 11y agoFor me, Firefox renders boxy pixels on OS X and smooth gradient on Windows. I filed a Firefox bug for this difference in scaling: https://bugzil.la/1238304 https://bugzil.la/1238304
- IvanK_net 11y agoYeah, seems like it is bilinear interpolation in Firefox and bicubic in Chrome. https://en.wikipedia.org/wiki/Bicubic_interpolation https://en.wikipedia.org/wiki/Bicubic_interpolation
- mistercow 11y agoWhen 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)
- jameslk 11y agoThere'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 11y agoI 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)
- stuaxo 11y agoPretty sure people used the same idea in Windows 95 with active desktop to make a gradienty background.
- fiatjaf 11y agoNot very beautiful.
- thatguyyouknow 11y agoI 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
- pteredactyl 11y agoIn this context "designers" are more accurately labelled as "graphic designers." Thank you.
- IvanK_net 11y agoI 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
- Negative1 11y agoI 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)?
- atriantafy 11y agoLove it. I'll definitely use it. Thank you!
- ycombobreaker 11y agoThe 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.
- fratlas 11y agoThis 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