La versión corta
- 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
180degen 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.
En esta página
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.
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.
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.
Para más azules más allá del cielo, del azul marino al hielo, consulta los códigos de degradados azules. Si quieres también el agua bajo el cielo, el artículo de degradados océano 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.
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 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.
linear-gradient(180deg, #03050f 0%, #0b1530 55%, #1a2a55 100%)Qué cielo va con cada diseño
Bueno para
Color de texto
Transmite
Bueno para
Color de texto
Bueno para
Color de texto
Transmite
Bueno para
Color de texto
Bueno para
Color de texto
Transmite
Bueno para
Color de texto
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 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 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
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.
.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; }Para ángulos, posiciones de paradas y colores de reserva, consulta los degradados lineales en CSS.
Preguntas frecuentes
¿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.
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