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

[Canonical HTML page](https://gradiently.design/es/guide/galaxy-gradient)

Una galaxia no es un color, es profundidad: un fondo oscuro, nubes de luz y puntos blancos esparcidos. Aquí tienes los códigos y las capas que lo hacen convincente.

## The short version

- Un degradado galaxia se construye con un fondo casi negro, una o dos nubes suaves de color de nebulosa y un puñado de estrellas pequeñas.
- Los degradados radiales van mejor para galaxias que los lineales, porque las nebulosas brillan hacia fuera desde un centro luminoso.
- La mayor parte de un fondo de galaxia debe seguir oscura, con el color cubriendo quizá un tercio del encuadre.
- Colocar dos colores de nebulosa muy separados evita el gris turbio que aparece donde se solapan tonos opuestos.
- Los degradados muy oscuros forman bandas con facilidad, así que un fondo de galaxia necesita una capa de grano ligera antes de exportar.

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.

- Espacio profundo: #03020a
- Índigo vacío: #1a1240
- Violeta nebulosa: #6d28d9
- Magenta cósmico: #c026d3
- Verde azulado profundo: #0e7490
- Verde azulado iónico: #2dd4bf
- Brasa: #fb923c
- Núcleo estelar: #fdf4e3

Una paleta de galaxia. Elige el fondo, una familia de nebulosa y el núcleo estelar. Usar todos los colores a la vez es como el espacio se convierte en un arcoíris.

## 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.

- Nebulosa violeta: `radial-gradient(ellipse at 30% 40%, #c026d3 0%, #6d28d9 25%, #1e1b4b 55%, #05040f 85%)`
- Nebulosa verde azulada: `radial-gradient(ellipse at 70% 35%, #2dd4bf 0%, #0e7490 25%, #172554 55%, #030712 85%)`
- Nebulosa de brasa: `radial-gradient(ellipse at 60% 60%, #fb923c 0%, #be185d 25%, #3b0a2a 55%, #08030a 85%)`
- Polvo cósmico rosa: `radial-gradient(circle at 20% 80%, #ec4899 0%, #7c3aed 30%, #1e1b4b 60%, #020617 90%)`
- Núcleo de galaxia espiral: `radial-gradient(ellipse 60% 25% at 50% 50%, #fdf4e3 0%, #c4b5fd 15%, #4c1d95 40%, #0b0820 75%)`
- Banda de la Vía Láctea: `linear-gradient(135deg, #04030c 0%, #1b1446 35%, #8b7fd6 50%, #1b1446 65%, #04030c 100%)`

Seis degradados de galaxia. El núcleo espiral usa una elipse aplanada, y la banda de la Vía Láctea es una franja brillante en el cielo oscuro.

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](https://gradiently.design/es/guide/night-sky-gradient) son más suaves. Para cortinas de luz verde y violeta, consulta los [degradados de aurora](https://gradiently.design/es/guide/aurora-gradients).

## 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. **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. **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. **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. **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. **Termina con grano** Una tenue capa de ruido sobre todo oculta el banding en las zonas oscuras y le da aspecto fotográfico.

```css
.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%;
}
```

Una galaxia completa en una sola regla. Como los mosaicos de estrellas son de 180, 260 y 420 píxeles, su patrón solo se repite donde coinciden los tres, algo poco frecuente.

La sintaxis radial, incluidos tamaños como `ellipse 60% 25%` y posiciones de paradas, se trata en [degradado radial en CSS](https://gradiently.design/es/guide/css-radial-gradient). Para la capa de grano, [textura de ruido en CSS](https://gradiently.design/es/guide/css-noise-texture) 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](https://gradiently.design/es/guide/muddy-gradients).

### Se ve turbio

- Violeta, verde azulado y naranja solapándose en el centro
- Color cubriendo todo el encuadre
- Un fondo gris neutro o negro puro
- Estrellas en una cuadrícula ordenada y visible
- Superficie digital lisa y limpia con banding

### Parece espacio profundo

- Una nube principal y una pequeña compañera, muy separadas
- Color en un tercio del encuadre, el resto oscuro
- Un fondo teñido de índigo o azul
- Estrellas en mosaico de tamaños irregulares
- Grano fino sobre todo

## 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.

Un diseño ancho con fondo de espacio profundo, una nube de color brillante a un lado y las palabras Noche de estreno en blanco

Un anuncio de stream en tamaño de miniatura de YouTube. Las palabras van en la mitad oscura; el color vive en el otro lado.

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

| Uso | Tamaño | Consejo |
| --- | --- | --- |
| Pantalla offline de Twitch | 1920×1080 | Nebulosa a un lado, horario en el lado oscuro |
| Arte de canal de YouTube | 2560×1440 | Mantén el núcleo cerca del área segura central |
| Banner de servidor de Discord | 960×540 | Solo una nube; se muestra pequeño |
| Fondo de pantalla de móvil | 1080×1920 | Pon la nebulosa abajo, lejos del reloj |
| Portada de álbum o lista | 1080×1080 | Un núcleo espiral en el centro funciona como símbolo |
| Cartel de evento | A4 a 300 ppp, 2480×3508 | La impresión oscurece los tonos profundos, así que aclara un poco el fondo |

Los degradados de galaxia se sienten en casa en juegos, música, tecnología y todo lo que ocurre de noche.

Los juegos y el streaming son el encaje natural, y el [branding para streamers de Twitch](https://gradiently.design/es/guide/twitch-streamer-branding) 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](https://gradiently.design/es/guide/dark-gradient-backgrounds).

## FAQ

### ¿Qué colores hay en un degradado galaxia?

Un fondo casi negro como #03020a, un color de nebulosa como violeta #6d28d9, magenta #c026d3 o verde azulado #2dd4bf, y un núcleo pálido cercano al blanco. La mayor parte del encuadre sigue oscura.

### ¿Cómo hago un fondo de galaxia en CSS?

Apila varios degradados radiales en `background-image`: un fondo oscuro, una o dos nubes de nebulosa que se desvanecen a transparente, y puntitos diminutos en mosaico con distintos valores de `background-size` para las estrellas.

### ¿Por qué mi degradado espacial se ve turbio?

Se solapan colores opuestos y hay demasiado color en el encuadre. Usa una nube principal, mantén un segundo tono lejos de ella y deja que domine el fondo oscuro.

### ¿Qué color de fuente funciona sobre un fondo de galaxia?

Blanco o un lila o azul muy pálido, colocado en la parte oscura del encuadre y no sobre el núcleo brillante de la nebulosa.