# Degradados de cielo nocturno: azules profundos, estrellas y luna

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

Un cielo nocturno creíble nunca es un azul marino plano. Tiene un cenit oscuro, un horizonte que brilla y una luz que viene de algún sitio. Aquí tienes los colores, los códigos y los pequeños detalles que lo hacen convincente.

## The short version

- Un degradado de cielo nocturno es más oscuro en la parte superior del encuadre y más claro cerca del horizonte, porque el cielo sobre nuestras cabezas es el más alejado de cualquier luz residual.
- Los cielos nocturnos reales rara vez son negro puro: están entre el azul marino profundo, el índigo y el gris azulado, con una franja más cálida o verdosa en el horizonte.
- Las estrellas se pueden dibujar en CSS con diminutos degradados radiales superpuestos al cielo, cada uno repetido con un tamaño de mosaico distinto para que el patrón nunca parezca una cuadrícula.
- Una luna se lee mejor como un degradado radial pequeño y brillante con una caída amplia y tenue hacia el azul que la rodea.
- Los degradados azul oscuro forman bandas con facilidad, así que añade un grano ligero y exporta en PNG o vídeo de alta calidad en lugar de JPEG muy comprimido.

Un **degradado de cielo nocturno** es una mezcla vertical que empieza casi en negro arriba y se aclara hacia un azul más suave cerca del horizonte, a menudo con una tenue franja cálida o verde azulada justo abajo. Esa dirección importa: sobre nuestras cabezas está la parte más oscura de cualquier cielo nocturno, y el horizonte aún conserva algo de luz dispersa de las ciudades, del sol que se ha puesto o de la luna. Acierta con ese orden e incluso dos colores se leerán como noche. Añade una luna, unas estrellas y algo de grano, y se leerá como un lugar.

## Los colores de un cielo nocturno real

Mira fotografías del cielo después de anochecer y encontrarás muy poco negro de verdad. El cenit es un azul marino profundo con un toque violeta. La mitad del cielo es índigo o pizarra. El horizonte recoge la luz que haya alrededor: naranja de las farolas, lila en la hora azul, un verde tenue bajo la aurora en latitudes altas. Elegirlos como paradas separadas es lo que distingue un cielo nocturno de un [degradado azul marino](https://gradiently.design/es/guide/navy-gradient) genérico.

- Cenit: #020611
- Azul marino profundo: #0b1a3a
- Azul noche: #1e3a6e
- Azul horizonte: #3b5b8f
- Resplandor urbano: #8a5a4a
- Luz de luna: #f4f1e3

Una paleta nocturna práctica: cuatro azules de arriba abajo, un tono cálido de horizonte y un blanco luna algo crema en lugar de blanco puro.

## Códigos de degradado de cielo nocturno

Todos van de arriba abajo a 180 grados, así que el color más oscuro queda en la parte superior del encuadre. Copia uno tal cual, o cambia la parada del horizonte para cambiar la hora y el lugar.

- Medianoche despejada: `linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%)`
- Hora azul: `linear-gradient(180deg, #0a1033 0%, #1c2a6b 45%, #4a5aa8 75%, #a78bb8 100%)`
- Resplandor de ciudad: `linear-gradient(180deg, #05070f 0%, #141a33 60%, #3d2f4a 85%, #8a5a4a 100%)`
- Noche polar: `linear-gradient(180deg, #01030a 0%, #071a2e 50%, #0e3b4a 80%, #1f6f6a 100%)`
- Oscuridad del desierto: `linear-gradient(180deg, #000000 0%, #070b1c 50%, #1a1f3d 80%, #3a3350 100%)`
- Salida de la luna: `radial-gradient(circle at 70% 25%, #f4f1e3 0%, #c9d4e8 3%, #4a6a9e 12%, #142447 40%, #050a1a 85%)`

Seis cielos. La hora azul tiene un horizonte lila, el resplandor de ciudad un naranja de farola, la noche polar un toque verde azulado, y la salida de la luna se ilumina desde un único punto brillante.

Fíjate en que las paradas no están espaciadas por igual. Casi todo el encuadre se queda oscuro, y el cambio de color ocurre en la quinta parte inferior, que es como se comporta un horizonte real. Un espaciado uniforme hace que el cielo parezca una rampa en lugar de una cúpula. Para el razonamiento detrás de las paradas desiguales, mira [paradas de color en degradados](https://gradiently.design/es/guide/gradient-stops).

## Cómo añadir una luna

Una luna es un degradado radial con tres partes: un disco pequeño casi blanco, una caída rápida a un azul pálido y un halo largo y tenue que se funde en el cielo. Mantén el disco pequeño, alrededor del 3 al 5 por ciento del ancho del encuadre. Una luna grande y suave parece un foco. Colócala descentrada, alta en una esquina, para que nunca compita con tu titular.

Luna sobre azul marino profundo: `radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)`

El disco crema termina en el 2,5 por ciento, el anillo azul pálido en el 4 por ciento, y el halo se extiende hasta el 14 por ciento antes de que el cielo tome el relevo.

Para combinar una luna con un resplandor en el horizonte, superpón el degradado radial a uno lineal. La guía de [degradados radiales](https://gradiently.design/es/guide/radial-gradient) explica posiciones y tamaños con más detalle.

## Cómo dibujar estrellas en CSS

Las estrellas son degradados radiales diminutos: un punto blanco nítido que termina una fracción de píxel después. Da a cada capa de estrellas su propio `background-size` para que se repita a un ritmo distinto. Mosaicos de 200, 230, 290 y 170 píxeles se repiten desacompasados, así que el ojo nunca encuentra la cuadrícula. Varía también la opacidad: las estrellas reales no brillan todas igual.

```css
.night-sky {
  min-height: 100vh;
  background-color: #020611;
  background-image:
    radial-gradient(1px 1px at 25px 35px, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 170px 150px, #fdfaf0 50%, transparent 51%),
    radial-gradient(1px 1px at 60px 140px, rgba(200, 215, 255, 0.6) 50%, transparent 51%),
    radial-gradient(circle at 78% 18%, #f4f1e3 0%, #9fb3d6 1.5%, rgba(59, 91, 143, 0.5) 8%, transparent 25%),
    linear-gradient(180deg, #020611 0%, #0b1a3a 55%, #1e3a6e 85%, #3b5b8f 100%);
  background-size: 200px 200px, 230px 230px, 290px 290px, 170px 170px, 100% 100%, 100% 100%;
}
```

Cuatro capas de estrellas con distintos tamaños de mosaico, una luna con halo transparente y el cielo de medianoche despejada debajo.

> **Menos estrellas parecen más reales** Un campo de estrellas denso parece ruido en la pantalla de un móvil. Deja pocas estrellas cerca del horizonte, donde la luz las borra, y deja que unas cuantas más grandes sostengan la escena.

## Ideas de diseño con cielo nocturno

Los cielos nocturnos encajan con eventos nocturnos, lanzamientos, marcas de sueño y bienestar, clubes de astronomía, lanzamientos musicales y todo lo que ocurre de noche. La mitad superior oscura es el sitio natural para texto claro, y el horizonte más luminoso da al ojo un suelo. Pon tu titular en la parte media alta y aleja la luna de él. Si las palabras cruzan la franja del horizonte, comprueba que se siguen leyendo: [texto sobre un degradado](https://gradiently.design/es/guide/text-on-gradient) cubre las reglas de contraste.

Publicación vertical de un evento de observación de estrellas, con texto claro arriba sobre un cielo nocturno azul profundo

Una publicación de Instagram de 1080×1350, con las palabras arriba, en la parte oscura del cielo.

Historia vertical con un titular corto y tranquilo sobre un degradado azul medianoche para un producto de sueño

Una historia de 1080×1920 para una marca de sueño. El formato más alto deja más cielo sobre las palabras.

| Uso | Tamaño | Dónde va la luz |
| --- | --- | --- |
| Fondo de pantalla del móvil | Formato historia 1080×1920 | Resplandor del horizonte abajo, bajo el dock |
| Hero web | 1920×1080 | Luna arriba a la derecha, titular a la izquierda |
| Publicación de evento | 1080×1350 | Resplandor abajo, palabras arriba |
| Portada de playlist | 1080×1080 | Luna pequeña y descentrada |
| Diapositivas | 1920×1080 | Cielo oscuro detrás del título |

Dónde colocar las partes luminosas de un cielo nocturno en los formatos habituales.

## Cómo evitar las bandas en un degradado azul oscuro

El azul oscuro es donde más se ven las [bandas en degradados](https://gradiently.design/es/guide/gradient-banding), porque las pantallas tienen pocos pasos distintos entre los casi negros. Reparte las paradas más oscuras en una distancia mayor, añade una capa de ruido fino con muy poca opacidad y evita la compresión JPEG fuerte. Para paletas oscuras en general, [fondos degradados oscuros](https://gradiently.design/es/guide/dark-gradient-backgrounds) tiene más recetas, y los [degradados de galaxia](https://gradiently.design/es/guide/galaxy-gradient) llevan el mismo cielo hacia el violeta y el magenta.

Si prefieres no construir a mano el grano, la luz y la legibilidad, los Marks de Gradiently son fondos vivos que se renderizan en cada tamaño en el que diseñas y se calman detrás de tus palabras. Busca en el Mercado palabras de color como «medianoche» o «azul marino profundo» y diseña gratis con cualquier Mark sin reservar.

## FAQ

### ¿Qué colores forman un degradado de cielo nocturno?

Empieza con un azul marino casi negro como `#020611` arriba, pasa por `#0b1a3a` y `#1e3a6e`, y termina con un azul más claro como `#3b5b8f` en el horizonte. Añade una parada cálida o lila justo abajo para la luz de la ciudad o la hora azul.

### ¿En qué dirección debe ir un degradado de cielo nocturno?

De arriba abajo a 180 grados, con lo más oscuro arriba. De noche, el cielo sobre nuestras cabezas siempre es más oscuro que el horizonte.

### ¿Cómo añado estrellas a un degradado CSS?

Superpón varios puntos diminutos con `radial-gradient()` sobre el cielo y da a cada capa un `background-size` distinto, para que las repeticiones se desacompasen y nunca parezcan una cuadrícula.

### ¿Por qué mi degradado azul oscuro muestra rayas?

Son bandas: muy pocos pasos de color en una superficie oscura grande. Añade un poco de grano, separa más las paradas oscuras y exporta en PNG en lugar de un JPEG comprimido.

### ¿Un degradado de cielo nocturno funciona bien detrás de texto?

Sí, el texto claro se lee bien sobre la parte alta y oscura del cielo. Mantén el titular lejos de la luna y de la franja luminosa del horizonte.