m-uwvg
51.98K
· August 2012 ·
1341762883

CSS Background Noise

Want to make your block colours feel a little bit more "real" but hate having to load up photoshop every time that you get the colour wrong?

Simply add this to your CSS...

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);

Then add your desired colour with the following:

background-color: #0094d0;

And you have a background colour with noise that you can update without ever opening Photoshop!

UPDATE: code originally created by @mightymeta as detailed here - http://www.mightymeta.co.uk/css-noise/

Sign in or sign up to add your response.

27 Responses

202
Screenshot

nice post.. will try with my blog :)

over 1 year ago ·
495
Untitled 1

For those wanting a quick preview:
http://codepen.io/anon/pen/EJxrs

over 1 year ago ·
534
Aa

very nice. thanks!

over 1 year ago ·
894
618176d863cad625685d958fb66ba1f2

Great solution, thanks for sharing. A curious question - how do you generate the image? Is it possible to export base64 from Photoshop?

over 1 year ago ·
895
618176d863cad625685d958fb66ba1f2

... Dr. Google says for example: http://www.greywyvern.com/code/php/binary2base64

over 1 year ago ·
903
618176d863cad625685d958fb66ba1f2

I found an interesting post on Stackoverflow on how to create a noisy background with html5, javascript and the canvas element, in this Fiddle there is an experiment with dynamic noise creating and Nathans idea: http://jsfiddle.net/osserpse/6SZQY/

over 1 year ago ·
969
1341762883

@osserpse you have to run it through a conversion process. As far as I am aware Photoshop can't export to base64. Love the fiddle btw!

over 1 year ago ·
1251
9f8130715cb4c452f1294eafa1b36290

I've made the site http://pngtextures.com with which you can make those kind of backgrounds :) (the UI is kid of crap)

over 1 year ago ·
1255
Dsc 8066v square

Here's a PNG-to-base64 converter: http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

I haven't used it, but it looks pretty decent, and gives a fair bit of good-to-know info.

over 1 year ago ·
1358
Cd0ac1afd622386fcc12926a23f5848c

very clever! Thanks for the tip; I hate having to create silly little PNG textures.

over 1 year ago ·
2136
Speechrocket4 square

I've discovered that you can create Base64 images using OpenSSL in the OS X Terminal app - all is explained here http://sketchytech.blogspot.co.uk/2012/12/base64-encoding-of-image-files.html

over 1 year ago ·
3504

thanks Mite :)

over 1 year ago ·
3728
1341762883

@javve Love this!

over 1 year ago ·
3729
1341762883

@javve You should make the textures available as base 64 too

over 1 year ago ·
3730
9f8130715cb4c452f1294eafa1b36290

@nathansmonk Thanks! =)
Actually, if you right-click on the images and choose "Copy image url" you'll get the base64 code.

over 1 year ago ·
3731
1341762883

@javve Holy crap, awesome

over 1 year ago ·
4804

@nathansmonk not sure where you sourced the code but I created it, so I wouldn't mind an acknowledgement. Here's the original article where I show how it was made:

http://www.mightymeta.co.uk/css-noise/

I used dopiaza.org for the base64 conversion btw. It's also good to run the png through ImageOptim first to reduce the amount of code needed.

over 1 year ago ·
4805
1341762883

@mightymeta I had no idea, really sorry. I originally saw the CSS in another site.

I'll update the tip with a link and credit for sure though. Thanks.

over 1 year ago ·
6318
0e2e822d32a7ab3d7f0b7098d03b1d16

I'd definitely given up on textured backgrounds. You've given me new hope! Thanks :)

over 1 year ago ·
6755

This is great! Thank you!!!

over 1 year ago ·
7351
38fac07694b5d75005e507607e502634

:O awesomeee

over 1 year ago ·
8133
Cb8bdc86c53abe7c9f5cf771535c627a

For those who want to experiment

Noise Texture Generator

You will have a the same effect as op if you click in "Yes, I want my noise be transparent."

Then go to any img to base-64 site and you are set. :)

over 1 year ago ·
11489
Mail logo normal

VERY COOL!

over 1 year ago ·
15396
61f287ce4e27eaa06b91354713ebd3e7

What about using both CSS3 background gradient & text texture together ? The trick here is that background gradients are added via background-image property (so "gradient are images", see css-tricks.com/css3-gradients ). So we must use CSS3 multiple background. Note that the gradient must be AFTER the texture image url.
This code is only for webkit browsers that support both multiple backgrounds & gradient backgrounds. I'll post an update if I make it cross browser & implement a fallback.
bg-texture-and-gradient {
background-image: url(data:image/png;base64,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), -webkit-linear-gradient(top, #67B2FD, #B6F3FF);
}

over 1 year ago ·
15397
1341762883

@adrien-be You absolutely! That's the beauty with the noise having the alpha channel.

over 1 year ago ·
17915
Screen shot 2014 11 20 at 9.32.15 pm

wow...interesting. Let me try it

over 1 year ago ·