[SOLUCIONADO] Como hacer un degradado profesional

[fegm_4]

Saludos a todos,

Estoy trabajando en un web y he querido hacerla usando degradados. En principio quiero hacer algo como esto:


Al momento he hecho lo siguiente en mi CSS

Código CSS:

.blue{background: rgba(13,47,88,0.7);
background: -moz-linear-gradient(45deg, rgba(13,47,88,0.7) 0%, rgba(13,47,88,0.62) 12%, rgba(47,89,146,0.18) 74%, rgba(47,89,146,0) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(13,47,88,0.7)), color-stop(12%, rgba(13,47,88,0.62)), color-stop(74%, rgba(47,89,146,0.18)), color-stop(100%, rgba(47,89,146,0)));
background: -webkit-linear-gradient(45deg, rgba(13,47,88,0.7) 0%, rgba(13,47,88,0.62) 12%, rgba(47,89,146,0.18) 74%, rgba(47,89,146,0) 100%);
background: -o-linear-gradient(45deg, rgba(13,47,88,0.7) 0%, rgba(13,47,88,0.62) 12%, rgba(47,89,146,0.18) 74%, rgba(47,89,146,0) 100%);
background: -ms-linear-gradient(45deg, rgba(13,47,88,0.7) 0%, rgba(13,47,88,0.62) 12%, rgba(47,89,146,0.18) 74%, rgba(47,89,146,0) 100%);
background: linear-gradient(45deg, rgba(13,47,88,0.7) 0%, rgba(13,47,88,0.62) 12%, rgba(47,89,146,0.18) 74%, rgba(47,89,146,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d2f58', endColorstr='#2f5992', GradientType=1 );}
            .green{background: rgba(28,148,104,1);
background: -moz-linear-gradient(-45deg, rgba(28,148,104,1) 0%, rgba(28,148,104,0.91) 12%, rgba(47,89,146,0.44) 74%, rgba(47,89,146,0.24) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(28,148,104,1)), color-stop(12%, rgba(28,148,104,0.91)), color-stop(74%, rgba(47,89,146,0.44)), color-stop(100%, rgba(47,89,146,0.24)));
background: -webkit-linear-gradient(-45deg, rgba(28,148,104,1) 0%, rgba(28,148,104,0.91) 12%, rgba(47,89,146,0.44) 74%, rgba(47,89,146,0.24) 100%);
background: -o-linear-gradient(-45deg, rgba(28,148,104,1) 0%, rgba(28,148,104,0.91) 12%, rgba(47,89,146,0.44) 74%, rgba(47,89,146,0.24) 100%);
background: -ms-linear-gradient(-45deg, rgba(28,148,104,1) 0%, rgba(28,148,104,0.91) 12%, rgba(47,89,146,0.44) 74%, rgba(47,89,146,0.24) 100%);
background: linear-gradient(135deg, rgba(28,148,104,1) 0%, rgba(28,148,104,0.91) 12%, rgba(47,89,146,0.44) 74%, rgba(47,89,146,0.24) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c9468', endColorstr='#2f5992', GradientType=1 );}
            .yellow{background: rgba(47,89,146,0.24);
background: -moz-linear-gradient(45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(252,176,61,0.91) 88%, rgba(252,176,61,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(47,89,146,0.24)), color-stop(26%, rgba(47,89,146,0.44)), color-stop(88%, rgba(252,176,61,0.91)), color-stop(100%, rgba(252,176,61,1)));
background: -webkit-linear-gradient(45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(252,176,61,0.91) 88%, rgba(252,176,61,1) 100%);
background: -o-linear-gradient(45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(252,176,61,0.91) 88%, rgba(252,176,61,1) 100%);
background: -ms-linear-gradient(45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(252,176,61,0.91) 88%, rgba(252,176,61,1) 100%);
background: linear-gradient(45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(252,176,61,0.91) 88%, rgba(252,176,61,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f5992', endColorstr='#fcb03d', GradientType=1 );}
            .red{height: 800px;
                background: rgba(47,89,146,0.24);
background: -moz-linear-gradient(-45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(216,0,65,0.91) 88%, rgba(216,0,65,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(47,89,146,0.24)), color-stop(26%, rgba(47,89,146,0.44)), color-stop(88%, rgba(216,0,65,0.91)), color-stop(100%, rgba(216,0,65,1)));
background: -webkit-linear-gradient(-45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(216,0,65,0.91) 88%, rgba(216,0,65,1) 100%);
background: -o-linear-gradient(-45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(216,0,65,0.91) 88%, rgba(216,0,65,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(216,0,65,0.91) 88%, rgba(216,0,65,1) 100%);
background: linear-gradient(135deg, rgba(47,89,146,0.24) 0%, rgba(47,89,146,0.44) 26%, rgba(216,0,65,0.91) 88%, rgba(216,0,65,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f5992', endColorstr='#d80041', GradientType=1 );
            }
 

y en mi HTML he colocado lo siguiente

Código HTML:

<div class="blue" style="display: block; width: 100%; height: 100%">
            <div class="green" style="display: block; width: 100%; height: 100%">
                <div class="yellow" style="display: block; width: 100%; height: 100%">
                    <div class="red" style="display: block; width: 100%; height: 800px">
                        Hola mundo
                    </div>
                </div>
            </div>
        </div>
 

El inconveniente que veo de usar este método, son los infinitos (obviamente estoy exagerando) divs que debo colocar para ir agregando los colores. Existe un método más rápido y con menos lineas?

[pzin]

Puedes especificar múltiples fondos en CSS para un solo elemento. La sintaxis sería algo así:

Código CSS:

background: fondo1, fondo2, fondo3;
 

[fegm_4]

Muchas gracias pzin! Funcionó, solo debo arreglar la posición y la intensidad de los colores