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:

¿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.

qué es un degradado
Imagen via 99designs

¿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:

gucci beauty foundation fondo en gradiente
El sitio web de Gucci Beauty utiliza un degradado de fondo sutil que resulta sencillo y atractivo. Imagen © vía Awwwards.

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:

gradiente feo
Este degradado de color hará que el espectador quiera apartar la vista inmediatamente. Evita cualquier cosa similar.

Degradado Linear

gradiente linear
Los degradados lineales tienen rayas que pueden repetirse en cualquier continuidad y en cualquier ángulo. Hemos exagerado un poco este patrón para hacer este principio más evidente.

Degradado Radial

gradiente radial
Los degradados radiales están compuestos de colores que irradian desde un punto focal.

Degradado Angular o cónico

gradient cónico
Los degradados angulares hacen que el gradiente salga desde un ángulo específico: en esta forma cónica, puedes ver algo parecido a la rueda del cursor de Apple (Imagen vía CSS-tricks)

Degradado de Reflejo

gradiente de reflejo
Este tipo de gradiente simplemente refleja un degradado de forma especular en un punto específico.

Degradado de Diamante

gradiente de diamante
Los degradados de diamante son degradados radiales que se extienden desde un punto focal en forma de diamante angular.

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)…

gradiente de cielo y nubes
Un simple degradado lineal de blanco a azul claro puede simular un cielo matinal con algunas nubes.

y hasta crear la ilusión de texturas metálicas:

gradiente de textura metalica
Lo creas o no, esta textura metálica simulada no es más que unos cuantos degradados colocados juntos. Imagen creada por Bel Santos en Publicdomainpictures.net).

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.

Webgradients.com
Webgradients.com

É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.

grabient.com
Grabient.com

É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.

uigradients.com
uiGradients.com

É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.

Hypercolor.dev
Hypercolor.dev

É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.

GradientKing
GradientKing

É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!

CoolHue 2.0.
CoolHue 2.0.

É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.

Gradient Hunt
Gradient Hunt

É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.

CSS Gradient
CSS Gradient

É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.

Gradient.png
Gradient.png

É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.

ColorSpace
ColorSpace

É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.

color gradient generator
Color Gradient Generator

É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).

Gradient Generator by Josh W. Comeau
Gradient Generator by Josh W. Comeau

É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.

CSS Gradient Generator
CSS Gradient Generator

É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)!

Comparte éste artículo.