In previous articles I’ve shown how to make gradient backgrounds with CSS3, no images required. I’ve also demonstrated how to make more complex visual effects by using CSS3’s multiple backgrounds feature to layer gradients on top of each other.

Today, I’m going to take things a step further: if we add images to a background, and if the gradients we add have areas of transparency or opacity, we’ll see portions of the image through the gradient, producing a "pop-art" effect.

(Note that I’m using the most up-to-date version of the CSS3 gradient syntax for the declarations below; the most significant change is one of simplicity when specifying gradients in Safari and Chrome, so the code as shown will only work in the most recent version of browsers, although it would be easy enough to use extra vendor prefixes and specialized values to target older browsers.)

The most important point in writing the style rules is that the image must be added last: remember, in CSS3 background layers are added in reserve order, so when we specify our image at the end of the background effects, it appears to be on the bottom, with the gradients layered on top.

Checkerboard

For example, to create a checkerboard gradient effect, the CSS for Webkit would be:

1. html, body { min-height: 100%; margin: 0; }
2. body {
3. background-image:
4. -webkit-linear-gradient(45deg, #000 25%, transparent 25%),
5. -webkit-linear-gradient(-45deg, #000 25%, transparent 25%),
6. -webkit-linear-gradient(45deg, transparent 75%, #000 75%),
7. -webkit-linear-gradient(-45deg, transparent 75%, #000 75%);
8. background-size:200px 200px;
9. background-position:0 0, 100px 0, 100px -100px, 0px 100px;
10. }

Adding opacity, Firefox support and an image would bring the CSS to:

1. html, body { min-height: 100%; margin: 0; }
2. body {
3. background:
4. -moz-linear-gradient(45deg, rgba(0,0,0,0.2) 25%, rgba(0,0,0,0) 25%),
5. -moz-linear-gradient(-45deg, rgba(0,0,0,0.2) 25%, rgba(0,0,0,0) 25%),
6. -moz-linear-gradient(45deg, rgba(0,0,0,0) 75%, rgba(0,0,0,0.2) 75%),
7. -moz-linear-gradient(-45deg, rgba(0,0,0,0) 75%, rgba(0,0,0,0.2) 75%),
8. url(grace-kelly.jpg);
9.   background:
10. -webkit-linear-gradient(45deg, rgba(0,0,0,0.2) 25%, rgba(0,0,0,0) 25%),
11. -webkit-linear-gradient(-45deg, rgba(0,0,0,0.2) 25%, rgba(0,0,0,0) 25%),
12. -webkit-linear-gradient(45deg, rgba(0,0,0,0) 75%, rgba(0,0,0,0.2) 75%),
13. -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 75%, rgba(0,0,0,0.2) 75%),
14.  url(grace-kelly.jpg);
15. background-size:200px 200px, 200px 200px, 200px 200px, 200px 200px, cover;
16. background-position: 0 0, 100px 0, 99px -101px, 0 100px, 0 0;
17. }

Note that if we add a feature of a different size, we must repeat background-size for all elements. Also note that there is a known rendering bug in Safari, Chrome and Firefox that leaves a very faint diagonal mark in some boxes. The slightly-off values in background-position above are an attempt to minimize that, but they may still appear.

Hypnotic Circles

We could also create a repeating radial gradient layered on top of a background image:

1. html, body { min-height: 100%; margin: 0; }
2. body { background: -moz-repeating-radial-gradient(rgba(0,0,0,0.3),
3. rgba(0,0,0,0.3) 5%, transparent 5%, transparent 10%),
4. url(ava-gardner.jpg);
5. background: -webkit-repeating-radial-gradient(rgba(0,0,0,0.3),
6. rgba(0,0,0,0.3) 5%, transparent 5%, transparent 10%),
7. url(ava-gardner.jpg);
8. background-position: -20px 20px, 0 0;
9. background-repeat: no-repeat, no-repeat;
10. background-size: cover;
11. }

Polka Dot Pop Art

We could also create a repeating radial gradient layered on top of a background image:

1. body {
2. background:
3. -moz-radial-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.3) 46%),
4. -moz-radial-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.3) 46%),
   url(gilda.jpg);
5. background:
6. -webkit-radial-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.3) 46%),
7. -webkit-radial-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.3) 46%),
8. url(gilda.jpg);
9. background-position: 0 0, 80px 80px;
10. background-size:160px 160px, 160px 160px, cover;
11. }