CSS Background Noise (Example) - Coderwall

Last Updated: July 04, 2023 · 137.4K · nathansmonk CSS Background Noise #css #photoshop #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,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);

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/

#css #photoshop #noise

Written by Nathan Monk

Say Thanks Respond

Related protips

Fully custom select box, simple css only

571.1K 32

Change the Bootstrap NavBar Breakpoint

500.4K 39

Creating full width (100% ) container inside fixed width container.

466.3K 14

26 Responses Add your response

abdulraoof

nice post.. will try with my blog :)

over 1 year ago · alexhajdu

very nice. thanks!

over 1 year ago · osserpse

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 · osserpse

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

over 1 year ago · osserpse

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 · nathansmonk

@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 · javve

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 · mklickman

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 · pdaoust

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

over 1 year ago · anthonylevings

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 · maheedhar budi

thanks Mite :)

over 1 year ago · nathansmonk

@javve Love this!

over 1 year ago · nathansmonk

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

over 1 year ago · javve

@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 · nathansmonk

@javve Holy crap, awesome

over 1 year ago · mightymeta

@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 · nathansmonk

@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 · ultimatedelman

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

over 1 year ago · igor_g

This is great! Thank you!!!

over 1 year ago · angelbotto

:O awesomeee

over 1 year ago · lbertenasco

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 · nomisweb

VERY COOL!

over 1 year ago · adrien-be

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 · nathansmonk

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

over 1 year ago · adrien-be

Funny enough, I just came across this http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients/2547064#2547064

over 1 year ago · andym

wow...interesting. Let me try it

over 1 year ago ·

Have a fresh tip? Share with Coderwall community!

Post Post a tip Best #Css Authors oldboy 571.1K #css #jQuery #CSS 3 iatek 503.4K #css #Javascript #Node.js praveenvijayan 466.2K #css #Javascript #Python elad2412 416.2K #css #cross browser compatibility #photoshop projectcleverweb 308.1K #css #javascript #Python Related Tags #css #photoshop #noise Sponsored by #native_company# #native_desc# #native_cta# Filed Under Accelerate Your Web Development Skills Awesome Job See All Jobs Post a job for only $299 Sponsored by #native_company# — Learn More #native_title# #native_desc# #native_cta#