# Degradados oscuros con atmósfera: códigos intensos y sombríos

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

Lo oscuro es fácil. La atmósfera cuesta más: nace de dónde cae la luz, de cuánto color contienes y de qué están hechas las sombras. Doce códigos y el razonamiento que hay detrás.

## The short version

- Un degradado sombrío es una mezcla oscura en la que casi todo el encuadre está en sombra y el color solo aparece donde cae la luz.
- Los degradados sombríos usan colores apagados y algo agrisados en lugar de saturados, por eso resultan cinematográficos y no estridentes.
- Las sombras con un toque de color, como el negro azulado o el negro ciruela, se ven más ricas que el negro puro.
- Una única luz cálida sobre un fondo frío es la forma más rápida de dar atmósfera a un degradado oscuro.
- Los degradados oscuros forman más bandas que los claros, así que añade un poco de grano y exporta en PNG o en vídeo de alta calidad.

Un **degradado sombrío** es una mezcla oscura que se comporta como una habitación en penumbra: casi todo el encuadre está en sombra, una zona recibe la luz y los colores se contienen en lugar de forzarse. La receta es fácil de enunciar. Parte de un casi negro teñido, añade uno o dos tonos medios apagados y deja que una sola luz, a menudo cálida sobre un fondo frío, dé vida a la superficie. Abajo tienes doce códigos para copiar, y luego cómo construir el tuyo y mantener legibles las palabras encima.

## Qué hace que un degradado tenga atmósfera, y no solo sea oscuro

Muchos degradados oscuros resultan planos. Un azul marino que se funde en negro es oscuro, pero no tiene clima. La atmósfera nace de unas pocas decisiones que fotógrafos y etalonadores de cine toman por instinto, y que tú puedes tomar a propósito.

- **Clave baja.** Aproximadamente tres cuartas partes del encuadre son sombra. La luz es la excepción, no la norma.
- **Una sola fuente.** La luz entra por una esquina o un borde, así el ojo sabe dónde está la ventana o la lámpara.
- **Color contenido.** Los tonos medios están algo agrisados. Un verde azulado polvoriento resulta más sombrío que uno vivo.
- **Sombras con color.** El punto más oscuro es negro azulado, negro verdoso o sangre de buey, nunca `#000000`.
- **Contraste de temperatura.** Una pequeña luz cálida en una escena fría, o al revés, crea tensión.

### Oscuro pero plano

- Negro puro en un extremo
- Acento vivo y saturado
- Luz repartida por igual en todo el encuadre
- Diagonal recta, de esquina a esquina
- Superficie digital perfectamente lisa

### Con atmósfera

- Sombra teñida que conserva un tono
- Acento apagado, algo agrisado
- Luz concentrada en un punto
- Caída radial o en ángulo suave
- Grano fino, como de película

## Doce códigos de degradado sombrío

Cada uno es un único valor CSS que puedes pegar en `background`. Están agrupados a grandes rasgos por temperatura: primero los fríos y tormentosos, luego los cálidos, iluminados por lámparas, y después algunos intermedios.

- Tormenta: `linear-gradient(160deg, #2c3a4a 0%, #1b2330 45%, #0d1117 100%)`
- Petróleo de medianoche: `radial-gradient(ellipse at 70% 30%, #1f5c63 0%, #0f2e36 45%, #050f14 90%)`
- Mar profundo: `linear-gradient(200deg, #10314a 0%, #0a1a2f 50%, #04080f 100%)`
- Bosque al anochecer: `linear-gradient(180deg, #2f4a3a 0%, #17291f 50%, #070d0a 100%)`
- Sangre de buey: `radial-gradient(circle at 30% 20%, #6b1d2a 0%, #3a0f18 45%, #120609 85%)`
- Última brasa: `radial-gradient(circle at 80% 85%, #b4532a 0%, #4a1d12 35%, #120806 75%)`
- A la luz de las velas: `radial-gradient(circle at 50% 100%, #8a4b22 0%, #3d2115 40%, #0f0a08 80%)`
- Farola: `radial-gradient(circle at 20% 15%, #c98a3a 0%, #4b3220 30%, #14110f 70%)`
- Ciruela magullada: `linear-gradient(135deg, #3b1f3f 0%, #241329 50%, #0e0710 100%)`
- Tinta y violeta: `radial-gradient(circle at 75% 20%, #4c2a7a 0%, #1d1433 45%, #0a0812 85%)`
- Musgo y bronce: `linear-gradient(150deg, #0c120d 0%, #2a3320 55%, #7a5a2e 100%)`
- Grafito rosado: `linear-gradient(170deg, #4a3438 0%, #2b2628 55%, #161214 100%)`

Doce degradados sombríos. Fíjate en que ninguno termina en negro puro y ninguno usa un color totalmente saturado.

Si buscas algo más cercano a una noche despejada que a una tormentosa, los [degradados de cielo nocturno](https://gradiently.design/es/guide/night-sky-gradient) tiran más a azul y añaden estrellas. Para un color más profundo y brillante, con más saturación, los [tonos joya](https://gradiently.design/es/guide/jewel-tone-colors) están un paso por encima de todo lo que hay aquí.

## Una paleta sombría para construir

Cuando hagas el tuyo, trabaja con una paleta en lugar de dos colores. Cinco bastan: un fondo, dos pasos de sombra, un tono medio apagado y una luz. La luz es el único color al que se le permite brillar de verdad, y debe aparecer en una zona pequeña.

- Fondo nocturno: #0d1117
- Pizarra profunda: #1b2330
- Tormenta: #2c3a4a
- Gris lluvia: #5b6b78
- Ámbar de lámpara: #c98a3a

Una paleta fría y lluviosa con una luz cálida. Cambia el ámbar por un rosa empolvado o un amarillo sodio pálido y la historia cambia por completo.

Por qué la luz cálida funciona tan bien sobre la sombra fría se explica en [temperatura de color](https://gradiently.design/es/guide/color-temperature). Para más combinaciones listas, mira las [paletas de colores oscuros](https://gradiently.design/es/guide/dark-color-palettes).

## Cómo hacer un degradado sombrío en CSS

1. **Define un fondo teñido** Elige un casi negro con un tono, como `#0b0d12` para negro azulado o `#120806` para negro marrón cálido. Úsalo también como `background-color` de reserva.
2. **Añade el cuerpo de sombra** Pon un degradado lineal suave entre dos pasos oscuros del mismo tono. Esto da profundidad al encuadre antes de que llegue ninguna luz.
3. **Coloca una luz** Añade un degradado radial en una esquina que se funda a `transparent` hacia el 40 por ciento. Mantén su color apagado y su opacidad muy por debajo del máximo.
4. **Añade una contraluz fría** Opcionalmente, un segundo radial, más grande y más tenue, en la esquina opuesta y en la familia fría. Evita que el lado en sombra quede muerto.
5. **Termina con grano** Una capa de ruido fino con poca opacidad oculta las bandas y da a la superficie aspecto de película. [Degradados con grano](https://gradiently.design/es/guide/grainy-gradients) tiene el código.

```css
.moody {
  background-color: #0b0d12; /* tinted ground and fallback */
  background-image:
    radial-gradient(circle at 78% 18%, rgba(201, 138, 58, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 100%, rgba(31, 58, 68, 0.8) 0%, transparent 55%),
    linear-gradient(165deg, #151a22 0%, #0b0d12 100%);
}
```

Un resplandor de farola arriba a la derecha, una bruma verde azulada fría abajo a la izquierda y un cuerpo pizarra. Tres capas, ninguna imagen.

> **Las mezclas oscuras forman bandas** Con tan poco rango entre los valores más oscuros y los más claros, los degradados sombríos muestran bandas escalonadas en muchas pantallas y tras la compresión. El grano, exportar en PNG y evitar ajustes de calidad JPEG agresivos ayudan. [Bandas en degradados](https://gradiently.design/es/guide/gradient-banding) explica la solución en detalle.

## Poner palabras sobre un fondo sombrío

El texto claro sobre fondo oscuro se lee bien, hasta que cruza ese único foco de luz que tanto te ha costado. Planifica el titular en el lado de la sombra y aleja la luz de las palabras en lugar de ponerla detrás. Un blanco roto suave, como `#ece6dc`, se asienta mejor sobre un fondo sombrío que el blanco puro, que puede resultar duro.

Historia vertical oscura de un evento en la que la zona clara del fondo queda detrás del titular La sesión golfa

El fondo pasa directamente bajo las palabras, así que la zona más luminosa puede caer detrás del titular.

La misma historia oscura con una sombra tranquila detrás del titular y el resplandor limitado a un borde

Aquí el Mark coloca su zona más tranquila y oscura detrás del texto, y la luz se queda en el borde.

Esa versión de la derecha es lo que hace un Mark de Gradiently por sí solo: sabe dónde están las palabras, intensifica el color cerca de las letras y elige texto claro u oscuro en cada línea a partir de su propia paleta, sin añadir cajas ni sombras. [Texto sobre un degradado](https://gradiently.design/es/guide/text-on-gradient) cubre la versión manual.

## Dónde funcionan mejor los degradados sombríos

| Uso | Prueba | Tamaño |
| --- | --- | --- |
| Historia de evento nocturno o club | Tinta y violeta, Farola | 1080×1920 |
| Portada de pódcast | Sangre de buey, Grafito rosado | 3000×3000 |
| Cartel de carta de restaurante o bar | A la luz de las velas, Musgo y bronce | A4, 2480×3508 |
| Hero web para un estudio o agencia | Tormenta, Petróleo de medianoche | 1920×1080 |
| Miniatura de YouTube para un thriller o un videoensayo | Última brasa, Mar profundo | 1280×720 |
| Portada de playlist de Spotify | Bosque al anochecer, Ciruela magullada | 1080×1080 |

Los degradados sombríos encajan con todo lo que sucede de noche, con todo lo que quiere parecer meditado y con todo lo que se escucha en lugar de gritarse.

Encajan con la noche, la música, las bebidas, el cine, la perfumería y el lujo discreto. Encajan mucho menos con una fiesta infantil o unas rebajas de verano. Para una interfaz entera en este registro, [fondos degradados oscuros](https://gradiently.design/es/guide/dark-gradient-backgrounds) explica el cuidado extra que necesitan las pantallas.

Si prefieres no ajustar capas a mano, el Mercado tiene Marks vivos exactamente en este registro, que puedes buscar con palabras como «verde azulado profundo» o «sangre de buey». Puedes diseñar gratis con cualquier Mark sin reservar, y reservar uno significa que ningún otro póster llevará la misma atmósfera.

## FAQ

### ¿Qué colores forman un degradado sombrío?

Casi negros teñidos como el negro azulado o el negro ciruela, uno o dos tonos medios apagados como un verde azulado polvoriento o pizarra, y una única luz más cálida como ámbar o brasa.

### ¿En qué se diferencia un degradado sombrío de uno oscuro?

Un degradado oscuro solo tiene que ser oscuro. Uno sombrío tiene una fuente de luz clara, color contenido y sombras con color, que le dan atmósfera.

### ¿Un degradado sombrío debe usar negro puro?

Normalmente no. Un casi negro con un toque de tono, como `#0b0d12`, se ve más rico y se funde con más suavidad con los colores de alrededor.

### ¿Por qué mi degradado oscuro se ve a rayas?

Son bandas, que se notan sobre todo en mezclas oscuras y sutiles. Añade grano fino y exporta en PNG o en vídeo de alta calidad en lugar de un JPEG comprimido.

### ¿Qué color de texto funciona sobre un degradado sombrío?

Un blanco roto suave suele leerse mejor. Colócalo sobre el lado de la sombra, lejos de la zona más luminosa, y comprueba el contraste donde cae cada línea.