Degradado galaxia: códigos cósmicos sobre espacio profundo

Un degradado galaxia es color de nebulosa suave que brilla sobre un fondo casi negro: nubes violeta, magenta, verde azulado o de brasa que se desvanecen en el espacio profundo, normalmente con un polvo de estrellitas encima. El secreto es la proporción. Las fotografías reales del espacio son sobre todo oscuras, y el color vive en una o dos nubes y no en todo el encuadre. Abajo tienes códigos copiables para las principales familias de nebulosas y un campo de estrellas completo en capas con CSS.

Qué hace que un degradado parezca una galaxia

Una mezcla de morado a azul es solo un degradado morado. Empieza a leerse como espacio cuando tiene las cuatro cosas que tu ojo espera de las imágenes astronómicas:

• Un fondo casi negro, ligeramente teñido de azul o violeta en lugar de neutro.
• Nubes de nebulosa que brillan desde un núcleo luminoso y se apagan de forma irregular, un trabajo para degradados radiales.
• Un núcleo más brillante dentro de la nube más luminosa: un rosa pálido, lila o crema casi blanco.
• Estrellas: muchos puntitos blancos y azul pálido, algunos algo más grandes, esparcidos sin patrón.

Códigos de degradado galaxia

Cada uno de estos es un único degradado radial que puedes pegar en una herramienta de diseño o en una hoja de estilos. Están cargados a propósito hacia el extremo oscuro. El violeta es el clásico degradado espacio; el verde azulado se siente más frío y científico; la brasa parece una estrella moribunda o un póster de ciencia ficción.

Si quieres algo más cercano, un cielo con estrellas y una luna en lugar del espacio profundo, los códigos de degradados de cielo nocturno son más suaves. Para cortinas de luz verde y violeta, consulta los degradados de aurora.

Construye un fondo de galaxia en CSS, capa a capa

Un solo degradado te da una nebulosa. Una galaxia sale de apilar varios, algo que CSS hace bien porque background-image acepta una lista. La primera capa de la lista se pinta encima.

1. 1

   Pon el fondo

   Un degradado radial amplio de índigo vacío en el centro a espacio profundo en los bordes, para que el encuadre nunca se vea plano.

2. 2

   Añade una nebulosa principal

   Un degradado radial de color que se desvanece a transparent, colocado fuera del centro, más o menos donde se cruzaría una línea de tercios.

3. 3

   Añade una segunda nube, más pequeña

   Un tono distinto, lejos del primero, con menos opacidad. Aporta profundidad sin pelear por la atención.

4. 4

   Esparce estrellas

   Puntos radiales diminutos en mosaico a dos o tres tamaños distintos, para que las repeticiones nunca se alineen en una cuadrícula visible.

5. 5

   Termina con grano

   Una tenue capa de ruido sobre todo oculta el banding en las zonas oscuras y le da aspecto fotográfico.

.galaxy {
  min-height: 100vh;
  background-color: #03020a;
  background-image:
    /* stars, tiled at three scales */
    radial-gradient(circle at 20% 30%, #ffffff 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, #dbeafe 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 60%, #ffffff 0 1.5px, transparent 2px),
    /* nebulae */
    radial-gradient(ellipse at 30% 40%, rgb(192 38 211 / 0.55) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 25%, rgb(45 212 191 / 0.3) 0%, transparent 40%),
    /* ground */
    radial-gradient(ellipse at 50% 45%, #1a1240 0%, #0a0820 50%, #03020a 100%);
  background-size:
    180px 180px,
    260px 260px,
    420px 420px,
    100% 100%,
    100% 100%,
    100% 100%;
}

La sintaxis radial, incluidos tamaños como ellipse 60% 25% y posiciones de paradas, se trata en degradado radial en CSS. Para la capa de grano, textura de ruido en CSS tiene un enfoque con filtro SVG copiable.

Cómo evitar que un degradado de galaxia se enturbie

El fallo más común es una galaxia que parece un moratón: colores que se solapan en marrón o gris, y color repartido tan por igual que nada brilla. El brillo necesita oscuridad alrededor. La solución casi siempre es menos color, colocado con más cuidado. La teoría del color detrás está en los degradados turbios.

Poner palabras sobre un fondo de galaxia

Los fondos de galaxia piden texto blanco o muy pálido, y lo piden sobre todo en la parte oscura del encuadre, no sobre el núcleo brillante de la nebulosa. Pon el titular en el espacio vacío y deja la nube a un lado. Las estrellas detrás de texto pequeño son un problema real: parecen puntos sueltos. Mantén la zona detrás del cuerpo de texto libre de las estrellas mayores, o deja esa región sin estrellas.

Este es el tipo de equilibrio que Gradiently gestiona por sí solo. Un Mark sabe dónde están tus palabras, mueve su región más tranquila y de mejor contraste detrás de ellas y suaviza el detalle ajetreado cerca de las letras, así que un fondo cósmico nunca se traga el titular. Los Marks también pueden llevar movimiento lento, que le sienta a una galaxia mejor que cualquier imagen fija.

Dónde funcionan mejor los degradados de galaxia

Los juegos y el streaming son el encaje natural, y el branding para streamers de Twitch muestra cómo mantener un mismo aspecto en paneles, banners y overlays. Para más fondos oscuros que brillan, lee los fondos de degradado oscuro.