Efecto glow en diseño: luz suave sin halos alrededor del texto

Un efecto glow es una mancha de luz: un núcleo de color brillante que se desvanece despacio hacia un entorno más oscuro, como si hubiera una lámpara justo detrás de la superficie. Bien usado, da profundidad a un diseño plano y lleva la mirada a un producto, un botón o una forma. Mal usado, se convierte en un anillo borroso alrededor del titular. La regla que sigue toda esta página es sencilla: pon el resplandor en formas y fondos, y mantén las palabras nítidas.

Dónde va un resplandor y dónde no

La luz alrededor de un objeto dice que ese objeto importa. La luz alrededor de las letras hace otra cosa: suaviza sus bordes, reduce el contraste entre el trazo y el fondo y hace que la línea parezca desenfocada en pantallas pequeñas. Por eso el resplandor debe quedar cerca de las palabras, nunca envolviéndolas. Si el texto necesita ayuda para leerse, arregla la zona que tiene detrás; alternativas a la sombra de texto explica las opciones más limpias.

Fondos con efecto glow y sus códigos

El fondo luminoso más fácil es un degradado radial que empieza brillante, baja rápido por un tono medio más intenso y se funde en un fondo casi negro. Sacar el centro del medio hace que parezca una fuente de luz y no una diana.

Cada uno tiene tres partes: un núcleo casi blanco o muy pálido, una parada intermedia saturada y un fondo profundo de la misma familia. Si te saltas la parada intermedia, el resplandor se ve gris donde se encuentra con la oscuridad, el problema que describe degradados sucios. Para saber más sobre la forma en sí, consulta degradados radiales.

Cómo crear un resplandor que parezca luz real

1. 1

   Empieza con un fondo oscuro o apagado

   La luz necesita oscuridad para verse. Un negro azulado, un verde profundo o un tono de papel envejecido funcionan; un fondo blanco brillante no deja sitio al resplandor.

2. 2

   Da al núcleo un tono más claro y cálido

   La luz real es más brillante y menos saturada en su centro. Haz el núcleo con una versión pálida del color del resplandor, como #fde68a para un brillo naranja.

3. 3

   Deja que caiga despacio

   El desvanecido debe recorrer una zona grande, a menudo la mitad del encuadre. Un desvanecido corto parece un foco recortado con tijeras.

4. 4

   Decide de dónde viene la luz

   Coloca el núcleo cerca de un borde o una esquina, o detrás del objeto que ilumina. Después mantén el resto del diseño coherente con esa dirección.

5. 5

   Añade grano fino

   Los desvanecidos largos y oscuros son donde más se notan las bandas. Una capa ligera de ruido oculta los saltos; degradados con grano explica el método.

Una prueba más: apaga el resplandor y vuelve a mirar. Si el diseño sigue funcionando, el brillo está añadiendo atmósfera. Si se desmorona, el brillo está haciendo un trabajo que deberían hacer la composición o el contraste.

Efecto glow en CSS

Hay tres formas fiables de crear un resplandor en la web. Una box-shadow sin desplazamiento y con mucho desenfoque ilumina los bordes de una tarjeta o un botón. Un degradado radial en un pseudoelemento pone un charco de luz suave detrás de un objeto. Y filter: blur() sobre una forma de color da el resultado más suave, con un coste de renderizado mayor. La referencia de box-shadow en MDN recoge todos los valores.

/* 1. A button that glows at its edges */
.button-glow {
  background: #7c3aed;
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgb(196 181 253 / 0.4),
    0 0 24px rgb(124 58 237 / 0.55),
    0 0 64px rgb(124 58 237 / 0.25);
}

/* 2. A pool of light behind a product image */
.product {
  position: relative;
  isolation: isolate;
}
.product::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(circle at 50% 55%, rgb(253 230 138 / 0.9), rgb(249 115 22 / 0.35) 35%, transparent 70%);
}

/* 3. A blurred orb in a hero background */
.orb {
  position: absolute;
  width: 480px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0891b2;
  filter: blur(120px);
  opacity: 0.6;
  pointer-events: none;
}

En los botones, mantén el brillo sutil y la etiqueta nítida: la luz pertenece a la forma del botón, no a sus palabras. La sintaxis completa de la sombra está en box shadow en CSS.

Resplandor en posts, carteles y stories

En un diseño estático, un resplandor rinde mejor detrás del protagonista o en la mitad vacía del encuadre. Pon la luz donde debe caer primero la mirada y luego coloca el titular sobre la parte más oscura y tranquila del fondo. La luz lleva al lector hasta las palabras sin tocarlas.

Esto es exactamente lo que hace un Mark de Gradiently por sí solo. Su zona más tranquila se coloca detrás de las palabras, los colores cerca de las letras se oscurecen o se aclaran, y Tinta automática elige texto claro u oscuro en cada línea a partir de la paleta del Mark, así que no hay cajas, sombras ni halos que añadir. Puedes ver la idea en Tinta automática.

Glow, neón y fugas de luz comparados

Estos tres se confunden a menudo. Un resplandor es luz suave y amplia de una sola fuente. Los degradados neón son color saturado y eléctrico con una línea fina y brillante en el centro, más cerca de un rótulo. Las fugas de luz son vetas cálidas que imitan la película y suelen entrar por un borde. Los tres necesitan un fondo oscuro y los tres se mantienen lejos del texto. Si quieres que la luz se desplace y cambie, los degradados aurora son un pariente en movimiento.