# Efecto glow en diseño: luz suave sin halos alrededor del texto [Canonical HTML page](https://gradiently.design/es/guide/glow-effect) Un resplandor debe parecer luz que cae sobre una superficie: un núcleo brillante, un desvanecido largo y una sala oscura alrededor. Ponlo detrás de formas y en los fondos, y mantenlo lejos del borde de tus letras. ## The short version - Un efecto glow es un núcleo de color brillante que se desvanece poco a poco hacia un entorno más oscuro, de modo que se lee como luz y no como pintura. - Los resplandores funcionan mejor en formas, botones, fotos de producto y fondos, donde añaden profundidad y guían la mirada. - Un halo de brillo alrededor del texto difumina el borde de las letras y las hace más difíciles de leer, así que mantén las palabras nítidas y pon la luz en otra parte. - En CSS, un brillo suave suele ser un degradado radial que se funde a transparente o una box shadow con mucho desenfoque y sin desplazamiento. - Un resplandor necesita un fondo oscuro o apagado para verse, y un poco de grano evita que su desvanecido largo forme bandas. 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](https://gradiently.design/es/guide/text-shadow-alternatives) explica las opciones más limpias. ### Evita - Un halo borroso pegado al titular - Un brillo del mismo color que el texto - Varios resplandores de igual fuerza compitiendo - Un brillo intenso sobre un fondo claro - Brillo en cada botón, tarjeta e icono ### Haz - Luz detrás de un producto, una forma o una foto - Un resplandor a un lado y las palabras en la zona tranquila - Una luz principal y, como mucho, un eco más débil - Un fondo oscuro o apagado para que la luz tenga espacio - Brillo reservado para lo único que importa ## 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. - Brasa: `radial-gradient(circle at 70% 30%, #fde68a 0%, #f97316 18%, #7c2d12 42%, #120a06 75%)` - Luz de piscina: `radial-gradient(circle at 30% 70%, #a5f3fc 0%, #0891b2 20%, #083344 48%, #030b10 80%)` - Escenario iluminado desde abajo: `radial-gradient(ellipse at 50% 100%, #f0abfc 0%, #a21caf 22%, #3b0764 50%, #0b0414 85%)` - Señal lima: `radial-gradient(circle at 80% 20%, #d9f99d 0%, #4d7c0f 22%, #1a2e05 50%, #070b03 80%)` - Luz de ventana sobre papel: `radial-gradient(ellipse at 20% 15%, #fff7ed 0%, #fed7aa 20%, #f5e6d8 50%, #efe7df 85%)` - Lámpara violeta: `radial-gradient(circle at 75% 25%, #c4b5fd 0%, #6d28d9 16%, #1e1b4b 45%, #09071a 80%)` Cinco resplandores oscuros y uno claro. La versión clara funciona porque el brillo es más cálido y luminoso que un fondo ya pálido, no porque sea más fuerte. 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](https://gradiently.design/es/guide/muddy-gradients). Para saber más sobre la forma en sí, consulta [degradados radiales](https://gradiently.design/es/guide/radial-gradient). ## Cómo crear un resplandor que parezca luz real 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. **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. **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. **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. **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](https://gradiently.design/es/guide/grainy-gradients) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) recoge todos los valores. ```css /* 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; } ``` Tres resplandores, ninguno sobre texto. Apilar dos o tres box shadows de fuerza decreciente da un borde más suave que una sola sombra grande. | Método | Ideal para | Coste | Cuidado con | | --- | --- | --- | --- | | `box-shadow` | Botones, tarjetas, campos | Bajo | Se recorta con `overflow: hidden` en un elemento padre | | Capa de `radial-gradient` | Luz detrás de imágenes y secciones | Bajo | Bandas en desvanecidos largos y oscuros | | Forma con `filter: blur()` | Fondos de hero, orbes ambientales | Mayor, sobre todo si está animado | Coste de repintado al hacer scroll; mantenlo quieto o pequeño | Elige el método más barato que dé el aspecto buscado. La mayoría de los brillos de una página deberían ser degradados o sombras, no elementos desenfocados. 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](https://gradiently.design/es/guide/css-box-shadow). ## 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. Una story vertical de evento en la que una mancha brillante del fondo queda justo detrás del titular y lo deslava La luz atraviesa el titular: la zona más brillante cae sobre las letras y las aplana. La misma story vertical de evento con el brillo desplazado lejos del titular y una zona oscura y tranquila detrás del texto La misma story con la luz lejos de las palabras. El resplandor sigue creando ambiente y el texto se mantiene nítido. 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](https://gradiently.design/es/guide/auto-ink-legibility). - Fondo nocturno: #09071a - Caída índigo: #1e1b4b - Luz violeta: #6d28d9 - Núcleo lila: #c4b5fd - Acento cálido: #fde68a - Texto nítido: #f8fafc Una paleta de resplandor en cuatro capas: fondo, caída, luz y núcleo, más un acento cálido y un color de texto que nunca toma el brillo. ## 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](https://gradiently.design/es/guide/neon-gradients) 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](https://gradiently.design/es/guide/light-leaks) 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. ## FAQ ### ¿Cómo hago un efecto glow en CSS? Usa una `box-shadow` sin desplazamiento y con mucho desenfoque, como `0 0 24px` en un color semitransparente, o un degradado radial que se funda a transparente detrás del elemento. Para el brillo más suave, desenfoca una forma de color con `filter: blur()`. ### ¿Debo poner un resplandor alrededor del texto? No. Un halo suaviza los bordes de las letras y reduce el contraste, así que las palabras cuestan más de leer. Mantén el texto nítido y coloca el brillo detrás de una forma o en el fondo cercano. ### ¿Qué fondo hace destacar un resplandor? Un fondo oscuro o apagado de la misma familia de color que el brillo, como un índigo profundo detrás de una luz violeta. Sobre un fondo blanco brillante, el resplandor no tiene adónde ir. ### ¿Por qué mi degradado luminoso tiene bandas? Los desvanecidos largos y oscuros tienen pocos saltos de color con los que trabajar, así que las pantallas muestran bandas visibles. Añade una capa de grano fino o exporta a mayor calidad para ocultarlas. ### ¿Qué diferencia hay entre un resplandor y un efecto neón? Un resplandor es luz amplia y suave de una sola fuente. El neón es color saturado con una línea fina e intensamente brillante en su centro, como el tubo de un rótulo.