Ultima revisión 20/09/2012

Gradientes y degradados en CSS3

Los degradados y gradientes son uno de los recursos más utilizados por los diseñadores para hacer que las las webs sean más vistosas y la verdad es que dan mucho juego para mejorar el aspecto de la página. No obstante, hasta la llegada de CSS3, también tenían una desventaja importante, ya que para implementarlos necesitábamos usar imágenes de fondo para los elementos.

A medida que ha ido avanzando y creciendo el CSS3, se ha mejorado el soporte y, entre otras cosas, también en el uso de degradados.

Según los estándares W3C, crear gradientes o degradados se realiza a través de:

linear-gradient( [<punto> || <angulo>,]? <stop>, <stop> [, <stop>]* )
radial-gradient( [<posicion> || <angulo>,]? [<forma> || <tamaño>,]? <stop>, <stop>[, <stop>]* )

Degradado Lineal

.degradadoLinear{
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#283a64,0),color-stop(#000000,1));
    background:-webkit-linear-gradient(top, #283a64 0%, #000000 100%);
    background:-moz-linear-gradient(top, #283a64 0%, #000000 100%);
    background:-o-linear-gradient(top, #283a64 0%, #000000 100%);
    background:linear-gradient(top, #283a64 0%, #000000 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #283a64));
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#283a64', endColorstr='#000000',GradientType=0 );
}

Degradado Radial

.degradadoRadial{
    background-image: radial-gradient(center left , ellipse farthest-corner, rgba(57, 107, 192, 0.8) 0%, rgba(52, 62, 82, 0.9) 100%);
    background-image: -o-radial-gradient(center left , ellipse farthest-corner, rgba(57, 107, 192, 0.8) 0%, rgba(52, 62, 82, 0.9) 100%);
    background-image: -moz-radial-gradient(center left , ellipse farthest-corner, rgba(57, 107, 192, 0.8) 0%, rgba(52, 62, 82, 0.9) 100%);
    background-image: -webkit-radial-gradient(center left , ellipse farthest-corner, rgba(57, 107, 192, 0.8) 0%, rgba(52, 62, 82, 0.9) 100%);
    background-image: -ms-radial-gradient(center left , ellipse farthest-corner, rgba(57, 107, 192, 0.8) 0%, rgba(52, 62, 82, 0.9) 100%);
    background-image: -webkit-radial(center left , ellipse farthest-corner, rgba(57, 107, 192, 0.8) 0%, rgba(52, 62, 82, 0.9) 100%);
}

Los degradados radiales no están soportados por Internet Explorer 9 e inferiores. A través de SVG (gráficos vectoriales) Internet Explorer 9 y superiores si permiten realizar degradados radiales e incluso algunas cosas mas espectaculares.

Degradados en formato vectorial (SVG)

SVG es un lenguaje de marcado basado en XML que descibre vectores, y el motor de HTML5 permite que SVG sea incrustado directamente en HTML. Definiendo el ancho y alto del documento SVG al 100%, tendremos una imagen que se escala cualquiera sea el alto del elemento, tal como lo haría una caja con gradientes en CSS3.

Degradado Lineal

#svg_degradado_lineal {
    background-image: url("gradientLinear.svg");
    border-color: rgba(20, 20, 20, 0.95) #000000 #000000;
    width: 135px;
    height: 135px;
    padding-bottom: 0;
    float:left !important; 
    margin:0 10px 0 0; 
}

Y el archivo SVG quedaría:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="closeWindowBtnLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:#192f4d;stop-opacity:0.8"/>
            <stop offset="51%" style="stop-color:#1a437f;stop-opacity:0.8"/>
            <stop offset="100%" style="stop-color:#0e2545;stop-opacity:0.95"/>
        </linearGradient>
        
    </defs>
    <rect x="0" y="0" width="100%" height="100%" style="fill:url(#closeWindowBtnLinearGradient1)" />
</svg>

Degradado Radial

#svg_degradado_radial {
    background-image: url("circles.svg");
    border-color: rgba(20, 20, 20, 0.95) #000000 #000000;
    width: 135px;
    height: 135px;
    padding-bottom: 0;
    float:left !important; 
    margin:0 10px 0 0; 
}

Y el archivo SVG quedaría:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="internalBorderLG1" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1"/>
            <stop offset="50%" style="stop-color:#f0f2f3;stop-opacity:1"/>
            <stop offset="100%" style="stop-color:#e5ebed;stop-opacity:1"/>
        </linearGradient>
        <radialGradient id="internalBorderRG1" cx="50%" cy="50%" r="100%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:#ffffff; stop-opacity:0.6" />
            <stop offset="100%" style="stop-color:#cfd5d7;stop-opacity:0.5" />
        </radialGradient>
        <radialGradient id="internalBorderRG2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:#ffffff; stop-opacity:0.5" />
            <stop offset="60%" style="stop-color:#ffffff; stop-opacity:0.5" />
            <stop offset="100%" style="stop-color:#cfd5d7;stop-opacity:0.2" />
        </radialGradient>
        <radialGradient id="internalBorderRG3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:#ffffff; stop-opacity:0.1" />
            <stop offset="40%" style="stop-color:#ffffff; stop-opacity:1" />
            <stop offset="88%" style="stop-color:#f0f2f3; stop-opacity:1" />
            <stop offset="92%" style="stop-color:#e4eaec; stop-opacity:1" />
            <stop offset="100%" style="stop-color:#cfd5d7;stop-opacity:0.9" />
        </radialGradient>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" style="fill:url(#internalBorderLG1)" />
    <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="url(#internalBorderRG3)" />
    <ellipse cx="60%" cy="145%" rx="100%" ry="100%" fill="url(#internalBorderRG1)" />
    <ellipse cx="70%" cy="105%" rx="60%" ry="60%" fill="url(#internalBorderRG2)" />
    
</svg>