Hacer degradados para diseño web nunca había sido una tarea muy difícil usando CSS, realmente lo único que hace falta son un mínimo de dos colores y una dirección, como ejemplo sería: de verde a amarillo y de abajo a arriba.
background-image: linear-gradient(to top, green 0%, yellow 100%);
Simple y rápido. Con la propiedad background le aplicamos un gradiente lineal (linear-gradient) con una direccionalidad de abajo a arriba (to top) entre dos colores, verde y amarillo. Puedes notar que ambos colores tienen un valor en %. Eso indica en qué momento del degradado son aplicados. El color verde comenzará a degradarse a partir del 0% de ancho, hasta el amarillo, que será totalmente naranja cuando el ancho del contenedor alcance el 100%.
En editores gráficos es tan simple como desplazarse por las opciones del menú hasta encontrar la propiedad de degradado he ir probando hasta conseguir un color degradado que se ajuste al diseño que estamos realizando en ese momento.
Para evitarnos la tediosa tarea de ir probando y seleccionando color por color internet nos brinda de varias herramientas online que generan degradados o con fantásticos degradados que simplemente con un clic podemos copiar y utilizarlas para nuestros proyectos.
Herramientas generadoras de degradados para diseño.
Los diseñadores web más experimentados conocemos varias herramientas que generan degradados online, las más utilizadas serían: uiGradients, Colorzilla y el generador de degradados de CSSmatic. En este caso vamos a hablar de otra herramienta online que se ha convertido en una de las favoritas por su interfaz elegante y moderna, por la facilidad de uso y por la posibilidad de descarga en PNG o en formatos para poder usarlas en SKETCH o Photoshop, estamos hablando de WebGradients.
¿Estás buscando un degradado de colores increíble que a menudo ves en diseños de páginas webs y diseños gráficos recientemente?
WebGradients es una colección gratuita de 180 degradados lineales que puedes utilizar como fondo de contenido en cualquier parte de tu sitio web o diseño gráfico. ¡Copia fácil código CSS3 y úsalo en ya mismo! También han preparado una versión .PNG de degradado. Además, podrás descargar packs para Sketch & Photoshop.
Cada degradado ha sido numerado y nombrado haciendo que su uso sea muy simple. En cada panel, podrás descargar el archivo PNG de 2500x2500px, y veras el código hexadecimal de los colores degradados, puedes copiar y pegar CSS3 también haciendo clic en el botón “copy CSS”. También puede aplicar el degradado a toda la ventana haciendo clic en el color cuando se muestre la pequeña lupa, podrás ver el efecto que provoca el degradado directamente antes de descargarlo.
A continuación, puedes ver una muestra del esquema de alguno de los colores degradados que nos ofrece esta gran herramienta online.
En este sitio, puede descargar todas los degradados como un archivo para Photoshop y Sketch a la vez.
Ya no tienes excusas, ¿A qué esperas para empezar a utilizar estos degradados para diseño en tus próximos proyectos?
Y si aún no te decides entre un color o degradado, te recomiendo que visites nuestro artículo sobre Las 20 Mejores paletas de colores para diseño.
Si te ha gustado este artículo no olvides seguirnos en redes sociales y compartir para estar informado cuando publiquemos más contenido para todos vosotros. ¡Hasta pronto!