So it has finally been done, noise in (almost) pure css. I say almost because of the way it works.

To do this, we are going to exploit multiple backgrounds, and linear gradients.

Requirements:

• Compass
• This image saved in your specified image folder config.rb
• This mixin.

How it Works

This technique works by using multiple css backgrounds, one is a solid colour linear gradient, and the other is an extremely noisy image. The solid colour gradient is slightly transparent, and therefore the noise shows through. Of course, because of the way it works, it doesn’t work in IE, and it isn’t pure CSS, but we can change the colour of the noise, and the intensity. We can even have none solid colour gradients (that have noise). Compass turns the image into a data URL, so it avoids the extra http request too.

Usage:

Usage is as easy as importing the mixin, then using it.

.noisy {
    @include noise(#00f);
}

We can even set two colours for the gradient (This is a little buggy, and some times mixes the colours rather than creating a gradient).

.noisy {
    @include noise(#00f, #f00);
}

And change the intensity

.noisy {
    @include noise(#00f, #f00, 0.05); /* Gradient with lots of noise */
    @include noise(#00f, false, 0.05); /* Solid colour with lots of noise. */
}

Yes it is a little “cheaty” but it works, right?

Update #1: Try it out