Crear un degrado con CSS

Esta es una técnica sencilla pero ingeniosa, se consigue utilizando un color de fondo y una imagen con degradado blanco a transparente. Te explicamos a continuación:

1. 1. Creamos una clase que con el color de fondo que deseamos y una imagen con degradado de la siguiente forma:

#degradado {
/*ponemos las dimensiones del área de degradado*/
width:150px;
height:150px;
/*Nos resuelve el problema de visualización del degradado en internet explorer, solo tienes que cambiar la ruta de tu imagen*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='degradado.png');
}

/* Esta clase la creamos para que firefox ignore la corección de visualizacion del IE. */
.degradado[class] {
/*Sigue la parte importante, seleccionamos la ubicación de nuestra imagen, su posición y como queremos se repita.*/
background:url(degradado.png) top left repeat-x;
}

1. 1. Ahora sólo otorgas la clase “degradado” y selecciona el color de fondo, por ejemplo:

<div class="degradado" style="background-color: #33CCFF;" >
<p>Este texto tendra un degradado de fondo</p>
</div>

El resultado es algo como sigue:

De acuerdo al degradado de tu imagen será el resultado en el fondo, en un ZIP te damos 2 diferentes degradados y el ejemplo que te acabamos de presentar. Recuerda que de acuerdo al tamaño del fondo que necesites será la imagen. Esperamos que te sirva. CLICK AQUÍ PARA DESCARGAR.