# Degradados de cielo: códigos de amanecer, mediodía y noche

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

El cielo es el único degradado que todo el mundo ha estudiado durante años sin proponérselo. Aquí tienes códigos para cada hora, en el orden del cielo real, y cómo poner palabras sobre cada uno.

## The short version

- Un degradado de cielo convincente es más profundo arriba y más pálido en el horizonte, porque la luz cercana al horizonte atraviesa más aire.
- Al amanecer y al atardecer los colores cálidos se sitúan abajo, cerca del horizonte, y los azules fríos se quedan arriba.
- Lleva un degradado de cielo en vertical con `180deg` en CSS, para que la parte superior del diseño se lea como la parte alta del cielo.
- Los cielos nocturnos resultan más naturales con una banda algo más clara en el horizonte que con un negro plano.
- La tinta oscura se lee bien sobre cielos de mediodía y abajo en un cielo de amanecer, mientras que la tinta clara va bien arriba en un amanecer, en el ocaso, en la hora azul y de noche.

Un **degradado de cielo** va de un color más profundo arriba a uno más pálido en el horizonte, porque así se comporta la luz del día: la luz cercana al horizonte atraviesa más aire, se dispersa más y deriva hacia el blanco. Acierta con esa dirección y casi cualquier azul se lee como cielo. Abajo tienes códigos copiables para seis momentos del día, de la primera luz a una noche sin luna, con notas sobre dónde funciona cada uno y qué color de texto le va.

## Cómo está organizado el cielo real

Mira hacia arriba un día despejado y el azul justo sobre ti es más rico que el azul cercano a los tejados. Al amanecer y al atardecer la luz del sol cruza tanta atmósfera que casi todo el azul se dispersa antes de llegar a ti, y quedan rojos, naranjas y rosas abajo mientras el cénit sigue frío. Eso te da dos reglas para cualquier degradado de cielo: profundo arriba, pálido abajo, y los colores cálidos solo cerca del horizonte.

- Índigo del alba: #2b3a67
- Rosa de primera luz: #e3a6b4
- Cénit del mediodía: #1f6fd1
- Horizonte del mediodía: #a9d3f5
- Hora dorada: #f59e42
- Magenta del ocaso: #b5507a
- Hora azul: #23407a
- Medianoche: #03050f

Un día de cielo en ocho colores. Cada momento del día toma prestados dos o tres de estos, siempre con el más oscuro arriba.

## Códigos de degradado de amanecer y salida del sol

El amanecer es el cielo más suave del día. Arriba aún es índigo de noche, el centro vira a lila y una banda de rosa y melocotón se asienta en el horizonte. Resulta tranquilo y esperanzador, por eso va bien con marcas de bienestar, rutinas de mañana, anuncios de algo nuevo y todo lo que quiera sentirse delicado y no estridente.

- Amanecer: de índigo a melocotón: `linear-gradient(180deg, #2b3a67 0%, #6c6fa8 35%, #e3a6b4 70%, #fbd7b5 100%)`
- Primera luz pálida: `linear-gradient(180deg, #8fa9d6 0%, #d7c6e0 55%, #fde2cf 100%)`
- Salida del sol: de lila a albaricoque: `linear-gradient(180deg, #3d4f8a 0%, #c98fb0 60%, #ffc48a 100%)`

Tres amaneceres. Las paradas cálidas nunca suben del tercio inferior, que es lo que hace que se lean como amanecer y no como atardecer.

## Degradados de cielo despejado de mediodía y de día

Un cielo despejado de mediodía es el clásico **degradado azul cielo**: azul saturado arriba que se funde en un azul pálido, casi blanco, en el horizonte. Mantén el tono constante y deja que la luminosidad haga el trabajo. Si la parada inferior se vuelve gris en lugar de azul pálido, el cielo empieza a parecer contaminado. Una tarde brumosa es la misma idea con menos saturación, y un día nublado cambia el azul por un gris frío.

- Mediodía despejado: `linear-gradient(180deg, #1f6fd1 0%, #4f9be8 45%, #a9d3f5 85%, #dceefb 100%)`
- Tarde brumosa: `linear-gradient(180deg, #5b9bd5 0%, #9cc5ea 50%, #e6f1f8 100%)`
- Nublado: `linear-gradient(180deg, #8e98a3 0%, #b9c1c9 55%, #dde2e6 100%)`

Cielos de día. El mediodía despejado es el que la gente quiere decir con azul cielo; el nublado es útil cuando quieres calma sin color.

Para más azules más allá del cielo, del azul marino al hielo, consulta los códigos de [degradados azules](https://gradiently.design/es/guide/blue-gradient). Si quieres también el agua bajo el cielo, el artículo de [degradados océano](https://gradiently.design/es/guide/ocean-gradient) funciona al revés: pálido arriba, profundo abajo.

## Códigos de hora dorada, ocaso y hora azul

El cielo de la tarde es donde los degradados de cielo se vuelven dramáticos. La hora dorada mantiene un azul de día arriba y un ámbar intenso en el horizonte, y la suave banda grisácea entre ambos es real, así que no luches contra ella. El ocaso baja el azul a marino y añade magenta y coral. La hora azul, el breve lapso tras la puesta de sol, es casi enteramente azul y uno de los fondos oscuros más favorecedores que existen.

- Hora dorada: `linear-gradient(180deg, #4a7fc1 0%, #a9b8c9 45%, #f3c98b 80%, #f59e42 100%)`
- Ocaso: de azul marino a coral: `linear-gradient(180deg, #1b1f4b 0%, #4b3a7a 35%, #b5507a 70%, #f08a5d 100%)`
- Hora azul: `linear-gradient(180deg, #0f1c3f 0%, #23407a 50%, #5b7fb8 100%)`

Cielos de tarde. El ocaso es el más cargado de todos los códigos de aquí, así que dale menos palabras y más espacio.

Si tu diseño se apoya por completo en naranjas y rosas sin nada de azul, has pasado del cielo al atardecer, y los códigos de [degradados de atardecer](https://gradiently.design/es/guide/sunset-gradient) te servirán mejor.

## Códigos de degradado de cielo nocturno

Un cielo nocturno rara vez es negro puro. Las ciudades, la luna y el tenue resplandor de la atmósfera mantienen el horizonte un toque más claro que el cénit. Construye un degradado nocturno con una parte superior casi negra y un horizonte azul marino profundo y se lee como cielo; invertido, se lee como un agujero. Para estrellas, luz de luna y muchos más azules oscuros, lee la guía de [degradados de cielo nocturno](https://gradiently.design/es/guide/night-sky-gradient).

Noche sin luna: `linear-gradient(180deg, #03050f 0%, #0b1530 55%, #1a2a55 100%)`

Casi negro arriba, azul marino profundo en el horizonte. Añade un grano fino encima, porque un degradado tan oscuro forma bandas con facilidad en pantalla.

> **Los cielos oscuros forman bandas** Los códigos de hora azul y noche pasan por muy pocos valores de color distintos, así que las pantallas y las exportaciones comprimidas muestran escalones visibles. Una capa de ruido ligera lo arregla, como se explica en [banding en degradados](https://gradiently.design/es/guide/gradient-banding).

## Qué cielo va con cada diseño

| Cielo | Transmite | Bueno para | Color de texto |
| --- | --- | --- | --- |
| Amanecer | Delicado, esperanzador | Bienestar, lanzamientos, eventos matinales | Blanco arriba, índigo oscuro cerca del horizonte |
| Mediodía despejado | Abierto, optimista | Viajes, apps, ofertas de verano | Azul marino oscuro |
| Nublado | Sereno, serio | Informes, anuncios discretos | Carbón |
| Hora dorada | Cálido, nostálgico | Hostelería, fotografía, bodas | Marrón oscuro o blanco cerca de la parte superior |
| Ocaso | Dramático, social | Eventos, música, vida nocturna | Blanco |
| Hora azul y noche | Premium, concentrado | Tecnología, cine, aperturas nocturnas | Blanco o azul pálido |

Un punto de partida. Prueba tus palabras reales sobre tu fondo real, porque un solo degradado puede necesitar texto oscuro en un extremo y claro en el otro.

Ese último punto importa más en los cielos que en la mayoría de los degradados, porque un cielo pasa de oscuro a claro por diseño. Coloca las palabras donde el cielo esté más tranquilo y elige la tinta para esa zona, no para el degradado entero. [Texto sobre degradados](https://gradiently.design/es/guide/text-on-gradient) profundiza. En Gradiently esto se resuelve por ti: un Mark mantiene su región más tranquila detrás de las palabras, y la tinta automática elige texto claro u oscuro línea a línea a partir de la propia paleta del Mark.

Una story vertical con fondo de colores de amanecer y el titular Despierta antes que el sol en la mitad superior

Una story para una clase temprana. El titular va en texto claro en el cielo alto y tranquilo, y los detalles van más abajo, donde la luz es más suave.

## Degradados de cielo para cada formato

Los formatos altos van de maravilla con los cielos: una story o un pin pueden mostrar toda la subida del horizonte al cénit. Los formatos anchos la aplastan, así que mantén los colores del horizonte en el tercio inferior y deja que el cielo alto llene el resto. Es una disposición distinta para cada tamaño, por eso recortar una imagen para varios formatos suele perder el horizonte.

- Story 1080×1920: 1080 × 1920
- Pin de Pinterest 1000×1500: 1000 × 1500
- Hero web 1920×1080: 1920 × 1080
- Cabecera de X 1500×500: 1500 × 500

En la story el cielo tiene espacio para respirar. En la cabecera, la banda cálida del horizonte debe ser más fina, o se traga el encuadre.

## Un degradado de cielo en CSS para cada hora del día

En una web, tres propiedades personalizadas bastan para describir cualquier cielo. Cambia una clase y toda la sección cambia de hora, algo útil para un hero que sigue la hora local del visitante o una página que se oscurece a medida que avanza una historia.

```css
.sky {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--zenith) 0%, var(--middle) 50%, var(--horizon) 100%);
}

.sky--dawn   { --zenith: #2b3a67; --middle: #c98fb0; --horizon: #fbd7b5; }
.sky--noon   { --zenith: #1f6fd1; --middle: #6fb0ee; --horizon: #dceefb; }
.sky--dusk   { --zenith: #1b1f4b; --middle: #b5507a; --horizon: #f08a5d; }
.sky--night  { --zenith: #03050f; --middle: #0b1530; --horizon: #1a2a55; }
```

Un degradado, cuatro horas. Elige la clase con una línea de JavaScript que lea el reloj del visitante, o fíjala a mano en cada página.

Para ángulos, posiciones de paradas y colores de reserva, consulta los [degradados lineales en CSS](https://gradiently.design/es/guide/css-linear-gradient).

## FAQ

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

Un cielo de día va de un azul saturado como #1f6fd1 arriba a un azul pálido como #dceefb en el horizonte. El amanecer y el ocaso añaden rosa, melocotón, magenta o coral solo cerca de la parte inferior.

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

De arriba abajo, con el color más oscuro arriba. En CSS es `linear-gradient(180deg, top, bottom)`.

### ¿Cómo hago que un degradado de amanecer se vea distinto de uno de atardecer?

En diseño, el amanecer suele leerse más suave y frío, con lila y melocotón y la banda cálida baja y fina. Los atardeceres suelen dibujarse más saturados, con naranja y magenta más intensos que suben más alto.

### ¿Qué color de texto funciona sobre un degradado azul cielo?

El azul marino oscuro o el carbón se leen bien sobre cielos de mediodía y cerca de un horizonte de amanecer. Usa blanco en cielos de ocaso, hora azul y noche, y arriba en un cielo de amanecer, y comprueba el contraste donde de verdad van las palabras.

### ¿Por qué mi degradado de cielo nocturno se ve con rayas?

Los degradados muy oscuros tienen pocos escalones de color, así que las pantallas muestran bandas. Añade una capa de grano ligera y exporta como PNG en lugar de un JPEG muy comprimido.