There are many variants on the CSS3 gradient technique that we discussed in the previous article. At the simplest level, you could overlay a gradient with the "fade" effect of another gradient on top:

45° Stripe With Fade

1. body { margin: 0; background-color: #000;
2. background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0),
3. rgba(0, 0, 0, 1) 50%),
4. -moz-repeating-linear-gradient(45deg, rgba(0, 238, 170, 0.5),
5. rgba(0, 238, 170, 0.5) 12px, rgba(0, 0, 0, 0) 12px,
6. rgba(0, 0, 0, 0) 15px);
7. -moz-background-size: cover, 22px 22px;
8. background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 50%),
9. -webkit-repeating-linear-gradient(45deg, rgba(0, 238, 170, 0.5),
10. rgba(0, 238, 170, 0.5) 12px, rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 0) 15px);
11. -webkit-background-size: cover, 22px 22px;
12. background-size: cover, 22px 22px; }

By playing around with angles, background size, position and stops, it's possible to produce a wide variety of patterns:

Sawtooth

1. body {  background-image:
2. -moz-linear-gradient(45deg, #500 0%, #500 50%, #300 50%, #300 100%);
3. -webkit-linear-gradient(45deg, #500 0%, #500 50%, #300 50%, #300 100%);
4. -moz-background-size: 50px 100px;
5. background-size: 50px 100px; }

Blueprint

(Including coverage for Opera).

1. body {
2. background-color:#269;
3. background-image: -moz-linear-gradient(white 2px, transparent 2px),
4. -moz-linear-gradient(0, white 2px, transparent 2px),
5. -moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
6. -moz-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
7. background-image: -o-linear-gradient(white 2px, transparent 2px),
8. -o-linear-gradient(0, white 2px, transparent 2px),
9. -o-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
10. -o-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
11. background-image: -webkit-linear-gradient(white 2px, transparent 2px),
12. -webkit-linear-gradient(0, white 2px, transparent 2px),
13. -webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
14. -webkit-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
15. background-size:200px 200px, 200px 200px, 40px 40px,40px 40px;
16. background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; }