# Degradados aurora: luz suave, bien hecha [Canonical HTML page](https://gradiently.design/es/guide/aurora-gradients) Los degradados aurora toman prestado el aspecto de las auroras boreales: velos luminosos de color que flotan sobre la oscuridad. Son preciosos, y caen enseguida en el terreno del salvapantallas. Así se mantienen del lado correcto. ## The short version - Un degradado aurora es un fondo oscuro con manchas o velos suaves y muy difuminados de color luminoso, inspirado en las auroras boreales. - Los degradados aurora funcionan porque los colores claros sobre una base casi negra parecen brillar, como lo hace la luz real de noche. - Las paletas aurora más convincentes se mantienen cerca de los colores de la aurora real: verdes, verdes azulados, violetas y un toque de rosa. - Un degradado aurora parece un salvapantallas cuando usa demasiados colores saturados, se mueve demasiado rápido o llena todo el encuadre por igual. - El texto sobre una aurora va en la zona más oscura, con el velo más brillante lejos de las palabras. 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. - Verde boreal: `radial-gradient(ellipse 80% 38% at 50% 32%, #6ee7b7 0%, #10b981 22%, #064e3b 48%, #020617 80%)` - Velo violeta: `radial-gradient(ellipse 75% 40% at 40% 30%, #c4b5fd 0%, #7c3aed 25%, #2e1065 52%, #05030f 82%)` - Verde azulado ártico: `radial-gradient(ellipse 85% 35% at 60% 28%, #67e8f9 0%, #0891b2 25%, #083344 50%, #020617 80%)` - Crepúsculo rosa: `radial-gradient(ellipse 80% 38% at 45% 30%, #fda4af 0%, #e11d48 22%, #4c0519 50%, #0a0206 80%)` Bocetos de aurora de una sola capa: una elipse ancha y plana de luz en lo alto del encuadre, que se apaga hacia casi negro. Los campos de aurora reales apilan varias de estas. ## 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. - Noche polar: #030712 - Abeto profundo: #064e3b - Verde aurora: #34d399 - Turquesa glaciar: #22d3ee - Violeta de altura: #8b5cf6 - Rosa escaso: #fb7185 Una paleta aurora sacada de la real. El verde y el verde azulado llevan el campo, el violeta da profundidad y el rosa aparece solo en un borde. 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](https://gradiently.design/es/guide/analogous-colors). ## Cómo evitar que una aurora parezca un salvapantallas ### Salvapantallas - Cinco o más colores totalmente saturados - Color repartido por igual de borde a borde - Movimiento rápido y en bucle que puedes seguir - Zonas oscuras perfectamente lisas o con banding visible - Manchas centradas y simétricas ### Aurora bien hecha - Dos o tres colores relacionados sobre casi negro - La mayor parte del encuadre oscura, con luz en una región - Un movimiento tan lento que solo se nota a la segunda mirada - Grano fino sobre las zonas oscuras - Velos que se inclinan y se van por un borde 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](https://gradiently.design/es/guide/gradient-banding) y los [fondos de degradado oscuro](https://gradiently.design/es/guide/dark-gradient-backgrounds). ## 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. ```css .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; } } ``` Tres velos difuminados sobre una base casi negra, desplazándose a lo largo de 30 segundos. El inset negativo oculta los bordes suaves que crea el desenfoque. Para saber más sobre cómo animar degradados con suavidad, mira los [fondos de degradado animado](https://gradiently.design/es/guide/animated-gradient-background). Para respetar las preferencias de movimiento, mira el [movimiento reducido](https://gradiently.design/es/guide/reduced-motion). ## 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. Un cartel de evento en el que la parte brillante de un degradado aurora queda detrás del título La luz y las palabras compiten cuando el resplandor pasa justo detrás del titular. El mismo cartel de evento con la zona más oscura del degradado detrás del título Con la base oscura detrás de las palabras, la aurora las enmarca en lugar de competir. ## 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](https://gradiently.design/es/guide/gradient-wallpaper) - 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. > **Una aurora por pantalla** Una aurora es un ambiente, no un patrón. Úsala una vez, como telón de fondo de una cabecera, una portada o una historia, y deja que el resto de la página siga tranquilo. Repetida en cada tarjeta, deja de sentirse como luz y empieza a sentirse como decoración. 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. ## FAQ ### ¿Qué es un degradado aurora? Un degradado aurora es un fondo oscuro con velos o manchas suaves y difuminados de color luminoso, inspirado en las auroras boreales. ### ¿Qué colores son mejores para un degradado aurora? Los verdes, verdes azulados y violetas sobre una base casi negra se ven más naturales, con rosa o rojo como acento escaso. Limítate a dos o tres colores. ### ¿Cómo hago un degradado aurora en CSS? Apila unas pocas elipses `radial-gradient` anchas y planas en un pseudoelemento, difumínalo con `filter: blur()`, colócalo sobre un fondo casi negro y anímalo despacio. ### ¿Por qué mi degradado aurora tiene franjas? Las rampas oscuras largas y sutiles muestran banding en la mayoría de las pantallas. Añade grano fino sobre las zonas oscuras y evita la compresión fuerte. ### ¿Dónde debe ir el texto en un degradado aurora? En la zona más oscura, lejos del velo más brillante, para que el texto claro tenga el máximo contraste.