# Degradados negros: diseñar con casi negro

[Canonical HTML page](https://gradiently.design/es/guide/black-gradient)

El negro puro es un agujero en la pantalla. Los degradados negros que parecen caros se construyen con casi negros que llevan un poco de color dentro, y una luz que se mueve.

## The short version

- Un degradado negro es una mezcla entre tonos casi negros, o de negro hacia un color, que se usa para dar profundidad a los diseños oscuros en lugar de un vacío plano.
- Los mejores degradados negros evitan el #000000 puro y usan negros con tinte que llevan una pequeña cantidad de tono, como el negro azulado, el espresso cálido o la berenjena.
- Los degradados oscuros muestran banding con facilidad porque hay pocos niveles de brillo entre valores casi negros, así que suelen necesitar grano o un rango más amplio.
- El texto de cuerpo sobre un degradado negro se lee mejor en un blanco roto suave, y el texto secundario gris sigue necesitando una relación de contraste de al menos 4,5:1.
- Los degradados negros van bien en lanzamientos, lujo, música, vida nocturna y productos con modo oscuro, donde el campo oscuro hace brillar un color de acento.

Un **degradado negro** es una mezcla que se mueve entre tonos casi negros, o de negro hacia un color, para que un diseño oscuro tenga profundidad y luz en lugar de un vacío plano. Los que parecen caros casi nunca usan `#000000` puro. Parten de un negro con tinte, como `#0b0b10`, dejan que la luminosidad cambie solo unos pocos puntos porcentuales y añaden una única fuente de color o de luz en algún punto del campo.

Esta guía te da negros con tinte, códigos de degradados negros para copiar, la solución al banding que aqueja a las mezclas oscuras y reglas para el texto. Para los fondos más oscuros en general, mira los [fondos de degradado oscuro](https://gradiently.design/es/guide/dark-gradient-backgrounds); para lo básico de cómo funcionan las mezclas, empieza por [qué es un degradado](https://gradiently.design/es/guide/what-is-a-gradient).

## Por qué el negro puro se ve plano

`#000000` no tiene tono y no puede ser más oscuro, así que un diseño construido sobre él no tiene sombras, solo una ausencia. Nada en la vida real es tan negro: una habitación oscura, un cielo nocturno y una tela negra llevan un rastro de color y un cambio lento de brillo. Tu ojo lee ese cambio como profundidad.

- Negro puro: sin profundidad: `linear-gradient(180deg, #000000 0%, #000000 100%)`
- Casi negro con tinte: profundidad: `linear-gradient(180deg, #1a1a22 0%, #0b0b10 55%, #060609 100%)`

Lado a lado, la versión con tinte se lee como una superficie sobre la que cae la luz. El negro puro se lee como un hueco.

También hay una razón práctica. En las pantallas OLED, los píxeles negros puros se apagan por completo, y en algunos móviles tardan un instante en volver a encenderse, lo que puede dejar una breve estela cuando se desplaza contenido oscuro. Subir tu valor más oscuro unos pasos por encima de cero lo evita y no te cuesta nada visualmente.

## Negros con tinte: los colores dentro de un buen negro

Un negro con tinte es un color muy oscuro al que le queda un poco de saturación. En términos HSL, mantén la luminosidad entre un 4% y un 9% y deja la saturación en cualquier punto entre el 15% y el 40%. El tono decide el ambiente: los negros azulados se sienten técnicos y fríos, los marrones cálidos se sienten como cuero y café, y la berenjena se siente como la noche.

- Tinta: #0b0b10
- Negro marino: #0a0e17
- Negro bosque: #0b120f
- Negro berenjena: #120b14
- Espresso: #14100d
- Grafito: #161618

Seis negros con tinte. Solos parecen casi idénticos; uno junto a otro y junto al color, se nota su temperatura.

Si trabajas en OKLCH, los números son más fáciles de razonar: luminosidad en torno al 15% al 20% y croma entre 0,005 y 0,025. La Tinta de arriba es `oklch(15.2% 0.011 285)`, un negro con un susurro de azul. Nuestra guía de [códigos de color](https://gradiently.design/es/guide/color-codes-explained) explica cómo leer estos valores.

## Códigos de degradados negros que puedes copiar

Cada uno de estos mantiene su valor más oscuro por encima del negro puro y cambia la luminosidad con suavidad. Úsalos como fondos completos, cabeceras o bases de diapositivas, y elige el que tenga la temperatura que combine con tu color de acento.

- Caída de tinta: `linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%)`
- Foco negro azulado: `radial-gradient(120% 80% at 50% 0%, #1b2233 0%, #0a0e17 60%, #050608 100%)`
- Espresso cálido: `linear-gradient(180deg, #221b16 0%, #14100d 55%, #0a0806 100%)`
- Brillo de grafito: `linear-gradient(135deg, #0e0e10 0%, #2a2a2e 50%, #0e0e10 100%)`
- De negro a violeta: `linear-gradient(160deg, #050507 0%, #12101c 55%, #2a1b4a 100%)`
- De negro a brasa: `linear-gradient(200deg, #0a0706 0%, #1d0d08 50%, #5a1a0c 100%)`
- Negro y oro: `linear-gradient(135deg, #0b0906 0%, #1c160c 60%, #6b5320 100%)`
- Verde azulado de medianoche: `linear-gradient(180deg, #03080a 0%, #08171b 55%, #0f3036 100%)`

Ocho degradados negros, todos para copiar. Los cuatro primeros se mantienen cerca del neutro; los cuatro últimos dejan que un color surja de la oscuridad.

La dirección importa más sobre el negro que en ningún otro sitio, porque pasa muy poco más. La luz que cae desde arriba se lee natural y serena. La luz que sube desde una esquina inferior se lee como un resplandor, como el de una pantalla o una llama, y lleva el ojo a esa esquina. Para saber más, mira los [ángulos de degradado](https://gradiently.design/es/guide/gradient-angle).

## Degradados de negro a color

Los degradados negros más llamativos dejan que un color surja de la oscuridad. Dos reglas los mantienen ricos. Primera, no des al color más de un tercio del campo, para que el negro siga siendo la nota principal. Segunda, oscurece el color hacia el negro a lo largo de su propio tono en lugar de apagarlo pasando por gris: un violeta debe pasar por un índigo profundo al bajar, no por el carbón. Un medio gris es la causa más común de los [degradados sucios](https://gradiently.design/es/guide/muddy-gradients).

Resplandor violeta desde el negro: `radial-gradient(90% 70% at 80% 100%, #7c3aed 0%, #3b1d6e 30%, #140d24 60%, #08070c 100%)`

El violeta pasa por amatista profundo y ciruela de camino al negro, así que la caída se mantiene coloreada en lugar de gris.

Los navegadores modernos pueden hacer parte de esto por ti. Interpolar en OKLCH mantiene vivo el croma del color a través de las paradas más oscuras, y una línea de reserva simple mantiene cubiertos los navegadores más antiguos.

```css
.hero {
  /* Fallback for browsers without colour interpolation */
  background: linear-gradient(160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
  /* Blends through oklch, so the violet stays violet as it darkens */
  background: linear-gradient(in oklch 160deg, #08070c 0%, #140d24 55%, #7c3aed 100%);
}
```

La segunda declaración gana donde se admite `in oklch` y se ignora en los demás sitios.

## Cómo evitar el banding en los degradados oscuros

Las pantallas suelen mostrar 256 niveles por canal de color. Un degradado de `#0a0a0a` a `#1a1a1a` solo tiene 16 de esos niveles con los que trabajar, así que en una cabecera de 1920 píxeles de ancho cada escalón mide unos 120 píxeles y se ven franjas. Eso es el [banding en degradados](https://gradiently.design/es/guide/gradient-banding), y los degradados oscuros lo sufren más.

### Causa banding

- Un rango de luminosidad largo y muy estrecho, como de #0a0a0a a #1a1a1a
- Grises perfectamente neutros, donde los tres canales cambian en el mismo punto
- Exportar un degradado oscuro como JPEG comprimido
- Estirar una imagen de degradado pequeña por una pantalla grande

### Lo soluciona

- Una capa ligera de grano o ruido sobre el degradado
- Un ligero tono, para que los canales rojo, verde y azul cambien en puntos distintos
- Exportar a tamaño completo como PNG, o dibujar el degradado en vivo con CSS
- Un rango de luminosidad más amplio, o una distancia más corta para la mezcla

El grano es la solución más fiable, porque rompe el borde duro de cada escalón en una textura que el ojo vuelve a mezclar. Unos pocos puntos de opacidad bastan. Los [degradados con grano](https://gradiently.design/es/guide/grainy-gradients) tratan el aspecto a fondo; este es el CSS mínimo.

```css
.hero {
  position: relative;
  background: linear-gradient(180deg, #1c1c24 0%, #0b0b10 60%, #070709 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Una capa de ruido SVG al 8% de opacidad oculta los escalones de un degradado oscuro sin parecer sucia.

## Texto y color sobre un degradado negro

Las bases negras hacen que casi cualquier texto claro pase el contraste, así que el riesgo se traslada al texto secundario. Los grises medios que se ven bien en un monitor brillante pueden quedar por debajo del mínimo de 4,5:1 para el texto de cuerpo. El blanco puro también tiene un coste: algunos lectores encuentran áspero el blanco brillante sobre casi negro en pasajes largos, así que un blanco roto cálido es más amable y se lee igual de nítido. Mira el [contraste de color](https://gradiently.design/es/guide/color-contrast-accessibility) para las reglas completas.

| Color del texto | Contraste sobre #0b0b10 | Úsalo para |
| --- | --- | --- |
| `#ffffff` blanco | 19,6:1 | Titulares cortos |
| `#f2efe9` blanco roto cálido | 17,1:1 | Titulares y texto de cuerpo |
| `#a1a1aa` gris claro | 7,7:1 | Texto secundario |
| `#8a8a93` gris medio | 5,7:1 | Pies de foto y etiquetas |
| `#6b6b75` gris tenue | 3,7:1 | Solo texto grande, de 24 px en adelante |
| `#4a4a52` carbón | 2,2:1 | Decoración, nunca palabras |

Relaciones de contraste calculadas con la fórmula WCAG contra el negro Tinta. Todo lo que queda por debajo de 4,5:1 es demasiado tenue para texto de cuerpo normal.

Un post vertical con las palabras Después del anochecer en blanco roto sobre un degradado casi negro, profundo y de luz suave

Un campo casi negro, una línea en blanco roto cálido y un único acento: la maquetación clásica de un degradado negro.

## Dónde funcionan mejor los degradados negros

- **Lanzamientos y revelaciones**, donde un campo oscuro hace que un producto o un titular se sienta iluminado
- **Lujo, fragancias y joyería**, combinado con un acento metálico como `#c9a96e`
- **Música, vida nocturna y eventos**, con un color saturado que sube desde una esquina
- **Productos de tecnología y para desarrolladores**, donde los negros azulados se sienten precisos
- **Interfaces en modo oscuro**, usando dos o tres negros con tinte como capas de superficie
- **Portafolios de fotografía**, donde un marco negro tranquilo deja que las imágenes lleven el color

En Gradiently, el Mercado te permite buscar Marks por palabras de color como «casi negro» o «negro y oro», y cada Mark ya lleva grano y luz, así que los problemas de banding y de aspecto plano de arriba están resueltos antes de empezar.

## FAQ

### ¿Cuál es el mejor código hex para un degradado negro?

Parte de un casi negro con tinte como `#0b0b10` (negro azulado) o `#14100d` (espresso cálido) en lugar de `#000000`, y deja que la parada más clara quede unos pasos más arriba, como `#1c1c24`.

### ¿Por qué mi degradado negro tiene franjas?

Los valores casi negros tienen muy pocos niveles de brillo entre ellos, así que cada escalón se convierte en una banda visible. Añade una capa ligera de grano, da un ligero tono a los negros o amplía el rango de luminosidad.

### ¿Qué color de texto queda mejor sobre un degradado negro?

Un blanco roto cálido como `#f2efe9` se lee nítido y resulta más suave que el blanco puro. Mantén el texto secundario gris con un contraste de 4,5:1 o más.

### ¿Cómo hago un degradado de negro a color que no quede sucio?

Oscurece el color a lo largo de su propio tono de camino al negro, por ejemplo el violeta pasando por índigo profundo, en lugar de apagarlo pasando por gris. Interpolar en OKLCH en CSS ayuda.

### ¿Es bueno un degradado negro para el modo oscuro?

Sí, si es sutil. Las superficies del modo oscuro funcionan mejor como dos o tres negros con tinte separados unos pocos puntos porcentuales, con cualquier degradado visible limitado a zonas grandes de fondo.