La versión corta
- Un fondo de degradado oscuro con riqueza parte de un casi negro teñido, no de un negro puro, y añade un solo color iluminado que asciende desde él.
- Los degradados oscuros resultan tristes cuando no tienen fuente de luz, cuando los negros no llevan color y cuando no hay contraste entre las zonas oscuras y las iluminadas.
- Los degradados oscuros generan más bandas que cualquier otro tipo, así que casi siempre necesitan un grano fino y una exportación cuidada.
- El texto claro sobre un degradado oscuro debe ir en la zona más oscura y cumplir al menos una relación de contraste de 4,5:1 en el texto de cuerpo.
- Un tipo blanco roto y unos negros algo levantados cansan menos la vista que el blanco puro sobre negro puro.
En esta página
Un buen fondo de degradado oscuro es un casi negro teñido con un color que brilla desde dentro, como si hubiera una sola luz encendida en una habitación a oscuras. El tinte da profundidad a los negros, el color iluminado da al ojo un lugar adonde ir, y la gran zona oscura hace que el texto blanco se vea nítido. Sin esas tres cosas, un degradado oscuro parece una pantalla tenue y nada más.
Empieza con un casi negro teñido
El negro puro #000000 es un callejón sin salida: no hay nada desde donde mezclar, y cualquier color a su lado parece pegado. Un casi negro con un toque de tono da al degradado una familia a la que pertenecer. Los negros azulados se sienten fríos y técnicos, los negros violetas se sienten lujosos, los negros verdosos se sienten naturales y los marrones cálidos recuerdan al cuero y la madera. Elige el tinte que combine con el color que vas a iluminar.
Añade un solo color iluminado
El color iluminado es lo que convierte la oscuridad en atmósfera. Colócalo descentrado, normalmente cerca de un borde o una esquina, para que se lea como una fuente de luz. Mantenlo en la misma familia que el tinte: luz violeta sobre negro violeta, verde azulado sobre negro azulado. Un color casi siempre basta. Dos pueden funcionar si son vecinos. Más que eso empieza a parecer una discoteca, lo cual está bien si diseñas para una; mira los degradados neón.
Por qué algunos degradados oscuros resultan tristes
Triste
- Negro puro que se mezcla con gris oscuro
- Luz repartida por igual, sin fuente
- El color iluminado apagado hacia el gris
- Franjas visibles a lo largo de la rampa oscura
- Texto gris sobre un fondo gris negruzco
Rico
- Un casi negro teñido con un tono claro
- Una luz, descentrada, que se desvanece
- El color iluminado, saturado en su punto más brillante
- Un grano fino sobre toda la superficie
- Texto blanco roto en la zona más oscura
El error más común es mezclar el color iluminado hacia el gris de camino al negro. Mantén el croma alto mientras oscurece: el violeta debe volverse un violeta más profundo, luego un negro violeta, nunca gris. Mezclar en OKLCH ayuda; degradados turbios explica por qué.
Bandas: el mayor riesgo del degradado oscuro
Los degradados oscuros abarcan solo un rango pequeño de valores, a menudo una docena o dos por canal, y somos muy sensibles a los pequeños escalones entre tonos oscuros. Por eso una rampa oscura y suave a lo ancho de toda la pantalla es la receta perfecta para las franjas visibles. Tres hábitos lo evitan: dar a la rampa suficiente rango, añadir grano fino y exportar sin mucha compresión. El detalle está en bandas en degradados y degradados con grano.
Texto sobre un degradado oscuro
Los fondos oscuros son generosos con el texto, pero solo en las zonas oscuras. Mantén las palabras lejos del color iluminado, donde el contraste baja. Usa blanco roto en lugar de blanco puro para pasajes largos, porque el blanco puro sobre casi negro puede deslumbrar. Y mide: las WCAG piden al menos 4,5:1 para el texto de cuerpo y 3:1 para el texto grande, algo que puedes comprobar con el comprobador de contraste de WebAIM.
| Color del texto | Sobre `#0b0f1a` | Úsalo para |
|---|---|---|
#ffffff blanco | Cerca de 19:1 | Titulares y etiquetas cortas |
#e5e7eb blanco roto | Cerca de 15:1, más suave | Texto de cuerpo y lectura larga |
#9ca3af gris medio | Cerca de 7,5:1, cumple AA | Pies de imagen y texto secundario |
#4b5563 gris oscuro | Cerca de 2,5:1, no cumple | Evítalo para todo lo que la gente deba leer |
La luz pasa justo detrás del título y lo aplana.
Con el fondo oscuro detrás del título, la luz lo enmarca en lugar de aplastarlo.
Dónde funcionan mejor los fondos de degradado oscuro
Los degradados oscuros encajan en todo lo que ocurre de noche, se siente premium o necesita que el color brille: música y eventos, cine y videojuegos, lanzamientos de tecnología, perfumería y licores, y portafolios donde el trabajo debe ser lo más luminoso de la página. También ayudan a la fotografía de producto, porque un objeto iluminado sobre un fondo oscuro parece valioso.
- Portadas y pósteres: un fondo oscuro hace que un único título brillante sea el protagonista
- Stories y Reels: los fotogramas oscuros a pantalla completa se sienten cinematográficos en un móvil
- Diapositivas: el texto claro sobre oscuro es más tranquilo en una sala con poca luz que el texto oscuro sobre blanco
- Portadas de sitios web: una cabecera oscura hace que la primera pantalla parezca intencionada; mira los fondos para la portada de un sitio web
Encajan peor donde la gente lee mucho rato en papel, o donde una marca se construye sobre la luz del día, la frescura o el juego. Ahí, un fondo claro con un color suave hace el mismo trabajo.
Un fondo de degradado oscuro en CSS
.dark-hero {
background-color: #0b0f1a; /* fallback */
background-image:
radial-gradient(circle at 85% 15%, #1d4ed8 0%, transparent 45%),
linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%);
color: #e5e7eb;
}
.dark-hero h1 {
color: #ffffff;
}Si estás diseñando toda una interfaz en modo oscuro y no un solo fondo, mira diseño para modo oscuro. Muchos Marks del Mercado están construidos sobre fondos oscuros, y dejan espacio a tus palabras automáticamente, moviendo su zona más calmada detrás del texto.
Preguntas frecuentes
¿Cómo hago que un fondo de degradado oscuro se vea bien?
Usa un casi negro teñido en lugar de negro puro, añade un color iluminado descentrado de la misma familia y termina con un grano fino.
¿Por qué mi degradado oscuro tiene franjas?
Las mezclas oscuras abarcan muy pocos valores de color, así que los escalones son anchos y fáciles de ver. Añade grano, amplía el rango y exporta con alta calidad.
¿Qué color de texto funciona sobre un degradado oscuro?
Blanco para los titulares y un blanco roto como #e5e7eb para el texto de cuerpo, colocados en la zona más oscura. Comprueba al menos 4,5:1 de contraste en el texto de cuerpo.
¿Debo usar negro puro en un degradado?
Pocas veces. Un casi negro con un ligero tono se mezcla de forma más natural y da profundidad al degradado.
¿Qué colores combinan con un degradado negro?
El violeta profundo, el verde azulado, el azul, el naranja brasa y el rosa funcionan como un único color iluminado sobre un fondo casi negro de la misma familia de tono.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
