Los gradientes de color, también conocidos como degradados, son una transición de uno o más tonos de colores. Es una técnica muy útil para los diseñadores gráficos y diseñadores web de la que probablemente ya has oído o que ya has utilizado. En este artículo te damos primero un resumen de los principales tipos de degradado. Te ofrecemos igualmente una lista de herramientas gratuitas para generar degradados en formato CSS para web, descargar gradientes listos para tus proyectos de diseño gráfico, o simplemente encontrar inspiración con las increíbles combinaciones de colores disponibles. El contenido se desglosa de la siguiente forma:
Contenido:
¿Cuáles son los tipos de degradados que existen?
Hay algunas opciones de degradado que pueden aportar mucho a tu diseño. Un degradado bien ejecutado crea un efecto armonioso y agradable para el espectador:
Sin embargo, el principio de “menos es más” se aplica mucho a los degradados: si tu degradado es demasiado intenso y colorido, dañará tu diseño y hasta lo convertirá en una monstruosidad:
Degradado Linear
Degradado Radial
Degradado Angular o cónico
Degradado de Reflejo
Degradado de Diamante
Hay otros tipos de degradados que puedes aplicar a tus diseños. Puede mezclar y combinar tipos y colores de degradado para crear varios efectos, desde simular cielos (incluidos amaneceres, atardeceres y nubes)…
y hasta crear la ilusión de texturas metálicas:
Puedes crear degradados en aplicaciones gráficas como Photoshop e Illustrator. Sin embargo, existen varios sitios web que te ayudarán a crear degradados y tonos de color únicos para aplicarlos a tus proyectos creativos. El usuario de Twitter y desarrollador web @Mazdadev comparte increíbles recursos creativos en su cuenta de Twitter, incluyendo esta lista de 13 herramientas de degradado gratuitas para diseñadores gráficos y web. Podrás obtener los degradados producidos en formato CSS3 para tu sitio web, o utilizarlos directamente en otros proyectos gráficos. ¡Las compartimos contigo a continuación!
Sitios web para generar gradientes gratis
1.Web Gradients
WebGradients es una colección de 180 degradados lineales gratuitos que puedes utilizar como fondos en cualquier parte de tu sitio web. Te permite copiar código CSS3 cross-browser y utilizarlo en cuestión de segundos. También han preparado una versión .PNG de cada gradiente, al igual que paquetes para Sketch y Photoshop.
Échale un vistazo (y agrégala a tus favoritos) aquí.
2. Grabient
Un creador de degradados interactivo que permite crear degradados lineales usando hasta 6 colores, modificar el ángulo del degradado y copiar el código CSS con un solo clic.
Échale un vistazo (y agrégala a tus favoritos) aquí.
3. UI-Gradients
Esta página te permite crear tus propios degradados y obtener el código CSS o descargarlos en formato .jpg. Hay una amplia galería de degradados existentes a la que puedes contribuir subiendo tus propias creaciones.
Échale un vistazo (y agrégala a tus favoritos) aquí.
4. HyperColor
Una colección de degradados que utilizan toda la gama de colores CSS de Tailwind. Sólo tienes que copiar y pegar los nombres de clase, CSS, o simplemente guardar los gradientes como una imagen. Te permite personalizar los degradados existentes, así como crear estilos adicionales como mesh y degradados granulados.
Échale un vistazo (y agrégala a tus favoritos) aquí.
5. Gradient King
Explora una galería de degradados basados en temáticas de color. Una característica interesante: te permite subir imágenes y crear degradados basados en la paletas de colores de éstas.
Échale un vistazo (y agrégala a tus favoritos) aquí.
6. CoolHue 2.o.
Una galería de degradados muy sencilla. Puedes descargarlos como archivos .png o copiar el código CSS3 a tu portapapeles. ¡Ofrece un plugin compatible con Sketch App y Figma para que puedas usar los degradados directamente en ellos!
Échale un vistazo (y agrégala a tus favoritos) aquí.
7. GradientHunt
Gradient Hunt es otra página sencilla que te ofrece una galería de degradados prefabricados para descargar en formato .png. Es de código abierto, lo que significa que también puedes crear degradados y añadirlos a la galería. Ofrece una extensión para Chrome. Aunque es totalmente gratuita, también puedes adquirir un plugin de Photoshop con más de 500 degradados por $19,99 USD.
Échale un vistazo (y agrégala a tus favoritos) aquí.
8. CSS Gradient
CSS Gradient es un generador de degradados gratuito que permite crear fondos degradados para sitios web. Además de ser un generador de degradados CSS, el sitio también ofrece contenido relacionado con temas de cromática en su blog. La sencilla interfaz de usuario te permite pasar directamente a la acción y divertirte con los degradados.
Échale un vistazo (y agrégala a tus favoritos) aquí.
9. Gradient Png
Otro creador de degradados intuitivo. Añade hasta 5 colores, mueve sus posiciones, cambia su peso, entre otras opciones. Diviértete con el modo aleatorio – y luego descarga el degradado de tu creación como un .png o coge el código CSS que se crea automáticamente.
Échale un vistazo (y agrégala a tus favoritos) aquí.
10. ColorSpace
Uno de nuestros sitios web favoritos debido a la brillante UX que hace que generar un gradiente sea increíblemente divertido. Elige la dirección del degradado y los colores, ¡y mira el resultado de tu creación! También puedes navegar a través de paletas, de las cuales puedes tomar el código HEX del color y generar un degradado.
Genera un degradado de color CSS con 2 o 3 colores. Cambia de dirección y copia el código CSS cuando estés listo.
Échale un vistazo (y agrégala a tus favoritos) aquí.
11. Color Gradient Generator
Esta herramienta genera degradados de color CSS que pueden utilizarse para fondos y elementos de interfaz de usuario. La interfaz de usuario no es la más amigable, así que hay una curva de aprendizaje para generar los tuyos propios. También puedes navegar por la galería de degradados y encontrar varios ya creados.
Échale un vistazo (y agrégala a tus favoritos) aquí.
12. Gradient Generator
Este generador de degradados CSS es más avanzado. Es un proyecto de Josh W. Comeau y ofrece opciones de personalización más específicas, como el modo de color y la curva de atenuación. Lee el blog del autor aquí para más información (solo disponible en inglés).
Échale un vistazo (y agrégala a tus favoritos) aquí.
13. CSS Gradient Generator
Otra página con un excelente diseño que hará la creación de degradados muy divertida. Ofrece degradados de color lineales y radiales – y te permite exportar su código CSS con colores en formato HEX o RGB.
Crea degradados lineales y radiales. Experimenta con modos de color aleatorios y edita las direcciones de los degradados. Cambia entre los modos HEX y RGBA. Desplázate hacia abajo en la página de inicio para obtener más información sobre los degradados CSS.
Échale un vistazo (y agrégala a tus favoritos) aquí.
Y esto es todo por hoy. Los degradados de color son muy atractivos y realmente pueden elevar tus proyectos de diseño web y gráfico cuando se utilizan de la manera correcta. Asegúrate de seguir a @Mazdadev en Twitter para obtener más listas de recursos increíbles como ésta. Imagen de portada vía Webgradients.com
Te invitamos a echar un vistazo a nuestra sección de descargas gratis. Combina todos los excelentes recursos gratuitos que encontrarás ahí y vuélvete un pro del diseño (¡sin salirte de tu presupuesto)!