Creating cool, gradient-like backgrounds

[ralphm]

I stumbled on this nice little Unique gradient generator recently. You can upload any image to it, or select of of the many the site offers, and it selects a small portion of it (you can choose how much) and then creates some CSS code that sets it as a background image for an element. The image is converted to a dataURI, so that the code alone is all you need. Because it takes a tiny bit of an image and blows it up, what you get is a unique background-gradient effect—which I think is a bit nicer than you can get from CSS3 gradients.

Here’s an example of the code it spits out:

.myElement { 
	/* Generated with http://gradient.quasi.ink */
	background-size: cover;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAdElEQVQIWwFpAJb/AUGBOP87aLIALRbcAEPeZQATD9YAAVIPCv89m9MA9chtAGdG1wATRuMAAVgoOP8+fLEA9nAoAG5X7wAEeQAAAU5GZP8mV3UAC20qAH9s/gD/aAAAAVZjoP8VGRYAJoRKAG2AAQD/Wv8AeRAjgrTFQZoAAAAASUVORK5CYII=");
}

Here’s a Pen showing what that looks like as a background image:

This neat little trick makes for interesting backgrounds with minimal bloat, weighing in at less that 1KB.

What do you think? Would you use this?

[santafe]

@ralphm

That is very cool. If my memory serves me correctly, I think you help me with creating a gradient on this website. You have to open a page other than the home page to see the gradient. What I really like about gradients is that - in my case at least, they stretch with the page size.

While I prefer ‘sutle’ over ‘flash’, I will still keep this in mind for my next project. As you noted the gradient will vary dependent on the content chosen.

I have it bookmarked. Thanks for sharing this.

[Gandalf]

Thanks for sharing this, Ralph. I have been using the Ultimate CSS Gradient Generator at colorzilla.com for years now, but this is even more “ultimate”!