Orbes de degradado: esferas luminosas para heros y portadas

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

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 tiene fondos que combinan bien con todos los orbes anteriores.

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.

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.

.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;
}

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 explica cómo. En la web, mueve el elemento desenfocado con transform y desactiva el movimiento para quien pida movimiento reducido.

Cómo hacer que un orbe de degradado parezca original

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