Degradados aurora: luz suave, bien hecha

Un degradado aurora es un fondo de color suave y luminoso que flota sobre una base oscura, como las auroras boreales: velos de verde, verde azulado y violeta que parecen brillar en lugar de estar posados sobre la superficie. Técnicamente es un conjunto de manchas o bandas de color muy difuminadas sobre una base casi negra, a menudo moviéndose muy despacio. Es uno de los aspectos más atmosféricos que puede tener un degradado, y uno de los más fáciles de pasarse.

Qué hace distinto a un degradado aurora

Tres cosas separan una aurora de un degradado oscuro normal. Primera, la base es muy oscura, casi negra, así que cualquier color encima se lee como luz. Segunda, el color llega en velos o manchas suaves e irregulares, no en una rampa lisa de un lado a otro. Tercera, los bordes están extremadamente difuminados, así que nada tiene una forma que puedas trazar. Juntas crean la impresión de luz en el aire y no de pintura en una pared.

Paletas aurora que funcionan

La aurora real toma sus colores de gases de la alta atmósfera: el oxígeno da el conocido verde y, más arriba, un rojo profundo, mientras que el nitrógeno añade azules y morados. Mantenerse cerca de esa familia es lo que hace que unos degradados aurora parezcan naturales y otros una discoteca. Empieza por un verde o un verde azulado, añade un violeta y usa el rosa o el rojo como un acento escaso.

Por supuesto, puedes alejarte de la naturaleza. Las auroras cálidas en ámbar y coral, o las monocromas en un solo azul, funcionan, siempre que la base siga oscura y los colores sigan siendo vecinos. Para saber más sobre cómo elegir colores que combinen, mira los colores análogos.

Cómo evitar que una aurora parezca un salvapantallas

La oscuridad es el ingrediente más importante. Una aurora necesita más zona oscura que iluminada, porque el brillo solo se lee contra ella. Esa misma oscuridad es donde el banding se nota primero: las rampas largas y sutiles de verde azulado oscuro a negro se escalonan a la vista en la mayoría de las pantallas. Un grano fino lo arregla, como explican el banding en degradados y los fondos de degradado oscuro.

Cómo construir un degradado aurora en CSS

La técnica habitual son unos pocos degradados radiales con forma de elipses anchas y planas, difuminados juntos en una capa sobredimensionada detrás del contenido. Difuminar un pseudoelemento cuesta más que un degradado simple, así que mantén bajo el número de capas y lenta la animación, y detén el movimiento para quien prefiera menos movimiento.

.aurora {
  position: relative;
  overflow: hidden;
  background: #030712;
}

.aurora::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 40% 22% at 30% 30%, #34d399cc, transparent 70%),
    radial-gradient(ellipse 35% 20% at 62% 26%, #22d3eeaa, transparent 70%),
    radial-gradient(ellipse 30% 18% at 52% 48%, #8b5cf699, transparent 70%);
  filter: blur(40px);
  animation: aurora-drift 30s ease-in-out infinite alternate;
}

.aurora > * {
  position: relative; /* keep content above the light */
}

@keyframes aurora-drift {
  to { transform: translate3d(4%, -3%, 0) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora::before { animation: none; }
}

Para saber más sobre cómo animar degradados con suavidad, mira los fondos de degradado animado. Para respetar las preferencias de movimiento, mira el movimiento reducido.

Tipografía sobre una aurora

Los fondos aurora son generosos con la tipografía, porque la mayor parte del encuadre es oscura. Pon el texto claro en la región más oscura y mantén el velo más brillante bien lejos de las palabras. El error es centrar el resplandor y el titular juntos, de modo que las letras quedan sobre la única zona con menos contraste.

Dónde encajan los degradados aurora

• Marcas de música, sueño, meditación y bienestar, donde una luz serena va bien con el producto
• Eventos nocturnos, planetarios, astronomía y viajes al norte
• Lanzamientos de tecnología que buscan atmósfera sin neón
• Fondos de pantalla y pantallas de bloqueo; mira los fondos de pantalla con degradado
• Fondos de vídeo en bucle, donde la deriva lenta es todo el sentido

Encaja peor donde la gente necesita leer mucho o comparar cifras. Los paneles, las tablas de precios y los artículos largos piden una superficie tranquila y uniforme, y un resplandor a la deriva detrás se convierte en una distracción. También choca con marcas luminosas y diurnas: una panadería o una juguetería infantil se verá extraña envuelta en noche polar. En esos casos, toma prestada solo la suavidad, como un único resplandor pálido sobre una base clara.

Como una aurora depende del movimiento lento, está en su mejor momento como bucle y no como imagen fija. En Gradiently, los diseños hechos con un Mark que has reservado se exportan como bucles perfectos de 5 a 30 segundos, con el movimiento y el ritmo que elijas.