Bite-sized CSS & HTML nuggets

Noise in CSS – fo’ realz?

For some years now, addding a “noise” texture to a design seems to be all the craze, and admittedly it can spruce up an otherwise rather bland background. The web design community has been trying to come up with an easy, lightweight method of adding noise, with some degree of success.

It turned out to be way too complex for gradients, a jQuery plugin is okay if you can live with the dependencies, and if you don’t need to support older versions of Internet Explorer you could use data URIs. Adventurous people might even try painting in a -webkit-canvas or -moz-element.

All of this got Dean Jackson from Apple thinking, and last month the CSS Working Group discussed adding something like turbulence() to the CSS Image Values level 4 module – personally, I’d stick with noise() though. Although we’re still a very long way from it, imagine using this:

div {
    background: linear-gradient(#ddd, #fff), noise(#000, 20%);