views:

108

answers:

2

Is it possible to add noise to a gradient in CSS?

Here is my code for a radial gradient:

body {
    color: #575757;
    font: 14px/21px Arial, Helvetica, sans-serif;
    background-color: #2f3b4b;
    background: -moz-radial-gradient(center 45deg, circle closest-corner, #2f3b4b 0%, #3e4f63 100%);
    background: -webkit-gradient(radial, center center, 10, center center, 900, from(#2f3b4b), to(#3e4f63));
}

What would I add to that to have noise on top of it, to give it texture?

+1  A: 

It is not possible (even if it was, it'd take a crapton of code tricks to do so) to generate noise textures using CSS alone. There aren't any new CSS3 properties that provide that sort of effect out of the box. A much quicker solution is to use a graphic editor such as Photoshop to do that.

BoltClock
so would you suggest creating a texture in photoshop and repeating x and y?
austin
@austin: Yeah. You can either create the noise as a repeating transparent PNG alone and place it as a `background-image`, or include the radial gradient in your image instead and make it non-repeat, although it's more compatible you have to keep it an exact size.
BoltClock
+4  A: 

There's no current way in css to add 'noise' to a background.

An alternative solution would be to create a transparent noise png in your graphic editor. Then apply that graphic as a background to a <div>. You would then need to place that <div> over the entire area of the <body> which should then give an appearance of a gradient with noise.

Ben Rowe
thanks so much!
austin
Or use multiple background images, the upmost one being your noise PNG. Browsers supporting gradients often support those, too.
DanMan