Generador de degradados de color CSS

Los CSS (Cascading Style Sheets) son una de las formas más fáciles y rápidas de crear un estilo para una web completa y cambiarlo o editarlo de forma sencilla y sin rompederos de cabeza. En un archivo .css podemos controlar tamaños, posiciones, estilos, etc. de prácticamente cualquier elemento de una página web.

Una de las nuevas caractarísticas de CSS3, en conjunción con HTML5, es la posibilidad de añadir degradados de color a objetos. Para generar un degradado de color, podemos ayudarnos de herramientas de diseño gráfico como Photoshop o Gimp, para obtener los valores hexadecimales de los colores que formarán el degradado, o utilizar alguna de las sencillas herramientas online gratuítas que nos permiten crear degradados visualmente. Y lo más importante, nos devuelven directamente el código CSS del degradado, teniendo solo que copiar y pegar el código a nuestro archivo style.css en formato estándar CSS3.

Os dejo un par de generadores de degradados CSS online que he encontrado:

Ultimate CSS Gradient Generator: muy sencillo e intuitivo, con multitud de degradados por defecto. Podemos modificar el comienzo y final de cada color en el degradado y la posición del color con una barra visual, muy parecida al gestor de degradados de Photoshop. Para añadir un nuevo color, solo tenemos que hacer doble click sobre la barra y selecionar el que queramos. Mediante unas simples casillas, podemos elegir la orientación del degradado (vertical u horizontal) y el tamaño en píxeles.

Nos devuelve el código css para “-moz-linear-gradient”, “-webkit-gradient” y “-webkit-gradient”, además de un color plano para navegadores que no soporten esta característica. Copiar y pegar en nuestro CSS.

CSS3 Gradient Generator: Es básicamente lo mismo que el anterior, aunque visualmente menos atractivo. Solo devuelve el código CSS para “-moz-linear-gradient” y “-webkit-gradient”, pero funciona de maravilla.

Os dejo los enlaces:

Ultimate CSS Gradient Generator

CSS3 Gradient Generator