CSS3: fondo degradado de color en columnas

Como conseguir un ejecto cortina, en el que el color de fondo se va transformado en un degradado de colores en varias columnas… A continuación explico el funcionamiento para hacerlo en css3 sin utilizar imágenes, solo utilizando la función linear-gradient de css3, que sirve para representar un gradiente lineal de colores.

El siguiente ejemplo he aplicado el estilo para el «body» de esta página web. Es totalmente responsive design, y lo podéis modificar a vuestro gusto, en número de columnas, color, transparencia…

body {
    background-color: #CF2D2D;
    /* Chrome & Safari */
    background-image:
    -webkit-linear-gradient(0deg, transparent 10%, rgba(0, 0, 0, 0.1) 10% ),
    -webkit-linear-gradient(0deg, transparent 20%, rgba(0, 0, 0, 0.1) 20% ),
    -webkit-linear-gradient(0deg, transparent 30%, rgba(0, 0, 0, 0.1) 30% ),
    -webkit-linear-gradient(0deg, transparent 40%, rgba(0, 0, 0, 0.1) 40% ),
    -webkit-linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.1) 50% ),
    -webkit-linear-gradient(0deg, transparent 60%, rgba(0, 0, 0, 0.1) 60% ),
    -webkit-linear-gradient(0deg, transparent 70%, rgba(0, 0, 0, 0.1) 70% ),
    -webkit-linear-gradient(0deg, transparent 80%, rgba(0, 0, 0, 0.1) 80% ),
    -webkit-linear-gradient(0deg, transparent 90%, rgba(0, 0, 0, 0.1) 90% ),
    -webkit-linear-gradient(0deg, transparent 100%, rgba(0, 0, 0, 0.1) 100% );
}

* Acordaros de añadirle los prefijos css (-webkit, -moz, -o, -ms) para que funcione correctamente en los diferentes navegadores web. En este ejemplo solo he añadido el prefijo -webkit válido para Chrome y Safari.

[demo]