Los degradados de color, también conocidos como gradientes, 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:
¿Qué son degradados de colores?
Los degradados de colores son simplemente patrones de colores en los cuales existe una transición suave de uno o más tonos. Se puede presentar en muchas formas, como transiciones lineares, radiales, angulares, o incluso en un patrón aleatorio, como aquí abajo.
¿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 X (antiguo Twitter) y desarrollador web @Mazdadev comparte increíbles recursos creativos en su cuenta de X, 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í.
Algunos recursos extras para los pros
Como habrás notado, durante este artículo mencionamos algunos aspectos técnicos sobre el manejo de estos degradados y gradientes que pueden haber resonado contigo si eres más avanzado en el diseño. Seguramente tienes algunas preguntas extras para disfrutar al máximo de estos degradados de colores en tus proyectos. Lo haremos en un formato de pregunta por pregunta con un video tutorial que acompañará a cada una:
¿Cómo degradar una imagen con CSS?
CSS significa “Cascading Style Sheets” (hojas de estilo en cascada). Las hojas de estilo en cascada (CSS) son un lenguaje de hojas de estilo utilizado para describir la presentación de un documento escrito en HTML o XML (incluidos dialectos de XML como SVG, MathML o XHTML). CSS describe cómo deben presentarse los elementos en pantalla, en papel, en voz alta o en otros medios. Mediante este lenguaje, un diseñador web puede degradar una imagen con CSS. Si te preguntas cómo degradar una imagen con CSS, te dejamos el siguiente tutorial que es parte de una serie sobre CSS y HTML5
¿Cómo degrado en Illustrator?
Adobe Illustrator es un editor de gráficos vectoriales y un programa de diseño desarrollado y comercializado por Adobe Inc. que permite crear logotipos, iconos, bocetos, tipografía e ilustraciones complejas en formato vectorial. Si te preguntas “¿Cómo degrado en Illustrator?“, este es un conocimiento básico que te ayudará mucho en tus diseños. Te dejamos un tutorial aquí:
¿Cómo degrado en Photoshop?
Adobe Photoshop es un software muy utilizado para la edición de imágenes rasterizadas, el diseño gráfico y el arte digital. A diferencia de Adobe Illustrator, las imágenes no son vectoriales. Sin embargo, se pueden crear igualmente degradados de colores. Si te has preguntado: “¿Cómo degrado en Photoshop?”, te dejamos un tutorial de base muy útil aquí abajo!
¿Cómo hacer degradados en Canva?
Canva es una herramienta verdaderamente increíble de la cual ya hemos hecho un review (lee nuestra opinión de Canva aquí!). En resumen, Canva es una plataforma gratuita de diseño gráfico que te permite crear fácilmente invitaciones, tarjetas de presentación, folletos, planes de clase, fondos de Zoom y mucho más utilizando plantillas diseñadas por profesionales (o crear las tuyas propias). Claramente puedes crear degradados en Canva para utilizarlos en todos los diseños que crees. Si te has preguntado: “¿Cómo hacer degradados en Canva?”, te dejamos un tutorial 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 X (antiguo 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)!