Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

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>

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.