CSS Textured / Noisy Gradient Background
How to create textured, noisy gradient backgrounds in CSS by combining gradient and noise image layers using the background-image property.
Textured gradient backgrounds are made by using gradients and noise images. For CSS gradients you can use a generator like this one. For noise images, again, you can use this noise generator.
The trick for making textured backgrounds lies in combining the CSS background properties. Instead of using only gradients as a background or only images, why not combine them like this:
background-image: url('../images/noise.png'), -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
background-image: url('../images/noise.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
background-image: url('../images/noise.png'), -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
background-image: url('../images/noise.png'), -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
background-image: url('../images/noise.png'), -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
background-image: url('../images/noise.png'), linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */Yes, it’s possible. Just use the background-image property as usual, add a comma and then a gradient. Use the noise generator to generate the image and the gradient generator for creating your desired gradient.
You can also check out a demo here: Textured / Noisy Gradient Background Demo