Design

Degradado

Una transición suave y continua entre dos o más colores a lo largo de un espacio definido.

Los degradados pueden ser lineales (transición a lo largo de una línea recta), radiales (transición hacia afuera desde un punto central) o cónicos (transición alrededor de un punto central). En CSS se implementan como valores de background-image mediante las funciones linear-gradient(), radial-gradient() y conic-gradient(). Los degradados añaden profundidad, dimensión e interés visual a los diseños. Las tendencias de diseño actuales favorecen degradados sutiles para fondos y degradados audaces y multicolor para branding (como en Instagram y Firefox). Al crear degradados entre ciertos pares de colores pueden aparecer puntos intermedios apagados o turbios; usar la interpolación en OKLCH ayuda a mantener colores vívidos a lo largo de toda la transición.

Pruébelo

Generador de paletas

Genera paletas de colores armoniosas usando esquemas complementarios, análogos, triádicos y complementarios divididos.

Generador de tonos

Genera escalas de tonos estilo Tailwind CSS (50–950) a partir de cualquier color base para sistemas de diseño.

Artículos relacionados

CSS color-mix(): Mezcla Colores Nativamente en el Navegador

Aprende CSS color-mix() para mezclar colores nativamente en el navegador. Domina la sintaxis, los espacios de color, los casos de uso prácticos y crea paletas

Construyendo un Selector de Color como Web Component desde Cero

Construye un selector de color accesible como Web Component. Implementa renderizado en canvas, sliders de tono, canales alfa y eventos personalizados con

Espacios de Color Perceptuales: Lab, LCH, Oklab, OKLCH

Explora los espacios de color perceptualmente uniformes — CIE Lab, LCH, Oklab y OKLCH. Aprende cómo fue diseñado cada uno, en qué destaca y cuál usar para CSS

Generación de imágenes OG coloridas con Next.js y Satori

Genera imágenes Open Graph dinámicas con Next.js y Satori. Crea plantillas OG con conciencia de color, degradados, colores de marca y diseños responsivos.

Separación de Color Explicada: Preparar Archivos para Imprenta

Comprende la separación de color CMYK, planchas de tinta plana, trapping y marcas de registro. Prepara archivos listos para imprenta con separaciones de color

Colores de marca de Amazon: Del marrón librería al naranja sonrisa

Sigue la evolución del color de Amazon, desde el marrón de librería hasta el icónico naranja sonrisa (#FF9900).