La versión corta
- 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.
En esta página
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 genérico.
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.
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.
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.
radial-gradient(circle at 78% 18%, #fbf8ec 0%, #f4f1e3 2.5%, #9fb3d6 4%, #3b5b8f 14%, #0b1a3a 45%, #020611 90%)Para combinar una luna con un resplandor en el horizonte, superpón el degradado radial a uno lineal. La guía de degradados radiales 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.
.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%;
}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 cubre las reglas de contraste.
Una publicación de Instagram de 1080×1350, con las palabras arriba, en la parte oscura del cielo.
Una historia de 1080×1920 para una marca de sueño. El formato más alto deja más cielo sobre las palabras.
Tamaño
Dónde va la luz
Dónde va la luz
Tamaño
Dónde va la luz
Tamaño
Dónde va la luz
Tamaño
Dónde va la luz
Cómo evitar las bandas en un degradado azul oscuro
El azul oscuro es donde más se ven las bandas en degradados, 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 tiene más recetas, y los degradados de galaxia 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.
Preguntas frecuentes
¿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.
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