# Orbes de degradado: esferas luminosas para heros y portadas

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

Una sola esfera luminosa sobre un fondo oscuro puede sostener una landing entera o la portada de un disco. Parece fácil, y es fácil hacerlo mal. Aquí tienes las recetas y las reglas de colocación.

## The short version

- Un orbe de degradado es una esfera luminosa hecha con un degradado radial, normalmente un núcleo brillante que se desvanece a través de un color saturado hasta un fondo oscuro.
- Los orbes tienen tres estilos habituales: un resplandor suave sin borde, una esfera iluminada con un borde nítido y un anillo de eclipse con el centro oscuro.
- Un orbe solo brilla de forma convincente sobre un fondo oscuro o de color profundo, porque el brillo es contraste con lo que lo rodea.
- Coloca el orbe lejos del titular, normalmente arriba y a un lado, y deja que las palabras descansen sobre el fondo tranquilo.
- En CSS, un orbe es una capa de degradado radial o un elemento circular desenfocado colocado detrás del contenido.

Un **orbe de degradado** es una esfera luminosa hecha con un degradado radial: un núcleo brillante, una banda de color saturado y un largo desvanecido hacia un fondo oscuro. Se ha convertido en un favorito para páginas de lanzamiento, heros de apps, portadas de podcasts y de discos, porque una sola forma da al diseño un punto focal, profundidad y energía sin ninguna foto. La receta es corta. Lo que separa un orbe impactante de una mancha borrosa es el fondo que tiene detrás, el color de su núcleo y dónde lo pones.

## Tres tipos de orbe de degradado

- **Orbe de resplandor suave:** sin ningún borde, solo luz que florece en la oscuridad. Tranquilo, atmosférico, bueno detrás de composiciones grandes.
- **Esfera iluminada:** un borde redondo nítido con un brillo en un lado, que se lee como un planeta o una bola de cristal. Atrevida y gráfica. Las reglas de iluminación están en [formas con degradado](https://gradiently.design/es/guide/gradient-shapes).
- **Anillo de eclipse:** un disco oscuro con luz que se derrama por su borde. Dramático, nocturno, popular en música y tecnología.

## Recetas de orbes de degradado

Cada receta es un único `radial-gradient()` que puedes pegar en CSS o en una herramienta de diseño. La primera parada es el núcleo, las intermedias son el cuerpo de color y la última es el fondo. Alejar la parada del fondo hace el resplandor más amplio.

- Resplandor violeta: `radial-gradient(circle at 50% 50%, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`
- Resplandor cian: `radial-gradient(circle at 50% 50%, #ecfeff 0%, #67e8f9 9%, #0891b2 24%, #083344 48%, #020617 74%)`
- Brasa: `radial-gradient(circle at 50% 50%, #fff7ed 0%, #fdba74 10%, #f43f5e 28%, #4c0519 52%, #0c0507 76%)`
- Resplandor esmeralda: `radial-gradient(circle at 50% 50%, #f0fdf4 0%, #86efac 8%, #059669 22%, #022c22 46%, #010805 72%)`
- Anillo de eclipse: `radial-gradient(circle at 50% 50%, #0b0a1a 0%, #0b0a1a 24%, #fde68a 25%, #f97316 28%, #7c2d12 38%, #0b0a1a 60%)`
- Resplandor iridiscente: `radial-gradient(circle at 50% 50%, #fdf2f8 0%, #f9a8d4 12%, #a855f7 30%, #3b82f6 46%, #0b1026 70%)`

Seis orbes sobre fondos oscuros. El iridiscente cambia de tono al desvanecerse, de rosa a violeta y a azul, y se lee como una superficie brillante.

Evita un núcleo blanco puro. Un blanco teñido con el color del propio orbe, como `#faf5ff` en un orbe violeta, mantiene el centro luminoso sin que parezca quemado. Evita también un fondo negro puro: un casi negro con un rastro del tono del orbe hace que el resplandor parezca pertenecer al espacio.

## Por qué los orbes necesitan un fondo oscuro

El brillo es contraste. Sobre una página blanca, el mismo orbe violeta parece un moratón; sobre un fondo de tinta profunda, parece luz. Si tu marca vive en fondos claros, usa un orbe pastel pálido con una caída suave y amplia, y acepta que se leerá como un florecer de color más que como un resplandor. [Fondos degradados oscuros](https://gradiently.design/es/guide/dark-gradient-backgrounds) tiene fondos que combinan bien con todos los orbes anteriores.

- Fondo tinta violeta: #0b0a1a
- Fondo tinta marino: #020617
- Fondo tinta rojo: #0c0507
- Fondo tinta verde: #010805

Cuatro casi negros, cada uno teñido hacia un orbe. Si el fondo encaja con el orbe, el resplandor parece natural.

## Dónde colocar un orbe de degradado

Un orbe es lo más brillante del encuadre, así que atrae la mirada antes que nada. Es un regalo si el titular está a su lado y un problema si está encima. Pon el orbe arriba y a un lado, recórtalo en el borde si es grande y mantén las palabras sobre un fondo oscuro y tranquilo. Nunca uses un orbe como resplandor detrás del texto: reduce el contraste justo donde más lo necesitas.

- Hero web 1920×1080: 1920 × 1080
- Post de Instagram 1080×1350: 1080 × 1350
- Portada de playlist 1080×1080: 1080 × 1080
- Story 1080×1920: 1080 × 1920

En un hero ancho, pon el orbe en el lado opuesto al titular. En formatos altos, ponlo en el tercio superior con las palabras debajo.

Una portada cuadrada de podcast con una luz violeta brillante arriba en el encuadre y el título del programa debajo sobre fondo oscuro

Una portada de podcast a 3000×3000. La luz va encima del título, nunca debajo.

Un banner ancho de lanzamiento de producto con el titular a la izquierda y una zona luminosa brillante a la derecha

Un hero de lanzamiento a 1920×1080, con las palabras a la izquierda y la zona más brillante a la derecha.

## Un hero con orbe de degradado en CSS

El método más sencillo es una capa de degradado radial en la propia sección. Para un resplandor más suave y orgánico, usa un elemento circular aparte con un desenfoque fuerte, que además te permite animarlo despacio sin repintar toda la sección.

```css
.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 30%, #faf5ff 0%, #c4b5fd 6%, #7c3aed 16%, #2e1065 34%, transparent 55%),
    #0b0a1a;
  color: #f5f3ff;
}

/* Optional: a soft second light, blurred */
.hero::before {
  content: "";
  position: absolute;
  width: 40vmax;
  aspect-ratio: 1;
  left: -12vmax;
  bottom: -18vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #0891b2 0%, transparent 65%);
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
}

.hero > * {
  position: relative;
}
```

Un orbe violeta arriba a la derecha sobre un fondo de tinta, con una tenue luz cian entrando desde abajo a la izquierda. El contenido queda por encima de ambos.

> **Los desenfoques grandes tienen un coste** Un `filter: blur()` grande en un elemento que se mueve puede perder fotogramas en móviles antiguos. Anima solo `transform`, mantén un radio de desenfoque moderado y lee [rendimiento de los degradados CSS](https://gradiently.design/es/guide/css-gradient-performance) antes de publicar.

## Animar un orbe de degradado

Un orbe que se desplaza unos pocos puntos por el encuadre, o que respira haciéndose algo más grande y más pequeño, parece vivo sin distraer de las palabras. Mantén el ciclo largo, entre 10 y 20 segundos, con entrada y salida suaves para que el movimiento nunca parezca empezar ni parar. En formatos sociales, expórtalo como un bucle corto cuyo último fotograma coincida con el primero: [vídeo en bucle perfecto](https://gradiently.design/es/guide/seamless-loop-video) explica cómo. En la web, mueve el elemento desenfocado con `transform` y desactiva el movimiento para quien pida [movimiento reducido](https://gradiently.design/es/guide/reduced-motion).

## Cómo hacer que un orbe de degradado parezca original

### Orbe genérico

- Morado a azul, centrado, sobre negro
- Núcleo blanco puro que se quema
- Colocado detrás del titular
- Perfectamente liso, con bandas en el desvanecido

### Orbe pensado

- Un color de marca con un cambio de tono en la caída
- Un núcleo teñido que sigue luminoso
- Desplazado, recortado, con el texto sobre fondo tranquilo
- Grano fino sobre el desvanecido para mantenerlo suave

El orbe es ya tan común que uno por defecto parece una plantilla. Una segunda luz más tenue, un cambio de tono en la caída o una capa de [grano](https://gradiently.design/es/guide/grainy-gradients) lo acercan a algo reconocible. Los Marks de Gradiently van más allá: cada uno es un fondo vivo con su propia luz, materiales y movimiento, revisado para que no haya dos iguales, y se renderiza a cualquier tamaño en el que diseñes. Explora Marks oscuros en el Mercado y diseña gratis con cualquiera que no esté reservado.

## FAQ

### ¿Cómo hago un orbe de degradado?

Usa un degradado radial con un núcleo blanco teñido, una banda de color saturado y un fondo oscuro, por ejemplo `radial-gradient(circle, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`.

### ¿Qué fondo funciona mejor detrás de un orbe de degradado?

Un casi negro teñido hacia el color del orbe. El brillo solo se lee como brillo contra un entorno oscuro.

### ¿Puedo poner texto encima de un orbe de degradado?

Mejor no. El orbe es la parte más brillante del encuadre, así que el texto encima pierde contraste. Coloca el orbe a un lado y mantén las palabras sobre un fondo tranquilo.

### ¿Cómo hago un orbe desenfocado en CSS?

Crea un elemento circular con un degradado radial que se funda a transparente y aplícale `filter: blur()`. Posiciónalo de forma absoluta detrás del contenido.