Overflow-wrap

Resplandor CSS: aprende a conseguir este efecto con sombras

Hace años conseguir un efecto de resplandor requería apoyarnos en imágenes generadas desde programas de diseño gráfico como Photoshop. Sin embargo, CSS permite separar el contenido de la presentación y ofrece a los diseñadores un completo control de la apariencia, sin tener que acudir a elementos externos a los propios estándares de la web. En este artículo, conseguiremos que diversos elementos de la página tengan un resplandor exterior, creando el efecto de emisión de luz, y lo haremos únicamente con hojas de estilo CSS.

Cómo crear efecto resplandor con CSS

Supongamos que queremos diseñar una página web y queremos añadir un efecto resplandor a algún elemento. Para hacerlo, nos vamos a apoyar en las sombras CSS, un recurso del que ya hemos hablado en diversos artículos. Puede parecer un poco extraño que con algo como una sombra, que se supone oscura, podamos conseguir un resplandor, pero en la práctica es posible, ya que somos capaces con CSS de definir el color de la sombra… ¡Y con esas sombras de colores claros ya tendremos el buscado resplandor!

Comencemos echando un vistazo al efecto en los elementos que vamos a reproducir:
Ejemplo Resplandor CSS

Cómo utilizar Sombras CSS para crear resplandor

Como hemos dicho, usamos una sencilla sombra CSS para conseguir el efecto de resplandor, coloreando dicha sombra con tonalidades claras.

Las sombras en CSS permiten aplicarse tanto a cajas como a textos. La propiedad de CSS cambia en cada caso, pero los valores que vamos a indicar son exactamente los mismos.

Aplicamos sombras a textos mediante text-shadow:

text-shadow: 0 0 30px #fff;

Para aplicar las sombras sobre cajas, usamos la propiedad box-shadow como sigue:

box-shadow: 0 0 20px #4f9;

Los valores que hemos indicado para ambas propiedades corresponden con los siguientes:

  • Desplazamiento horizontal de la sombra (cualquier unidad de CSS es válida).
  • Desplazamiento de la sombra en vertical (cualquier unidad de CSS).
  • Cantidad de distancia del degradado (unidades CSS).
  • Color de la sombra.

Para conseguir nuestro resplandor generalmente no vamos a aplicar desplazamiento a la sombra, ya que la iluminación debe partir del centro del objeto. Luego, la cantidad de distancia del degradado afecta a la cantidad de luz que va a emitir el objeto. A más distancia, el halo será mayor y, por tanto, el objeto tendrá un resplandor más remarcado.

En lo que respecta al color, podemos jugar con cualquiera que nos interese. La luz puede ser blanca, pero también amarilla, verde, etc. Lógicamente, esta luz se verá más clara cuanto el color de la sombra sea más brillante y también cuando el fondo donde se sitúa el elemento sea más oscuro.

Ejemplo de elementos con resplandor CSS

En el código que vemos a continuación tenemos los tres elementos de la imagen anterior, con los estilos CSS que hemos preparado para definir su aspecto. Aunque haya bastantes estilos CSS, realmente lo que respecta al efecto de resplandor se consigue con los atributos comentados en el punto anterior: text-shadow y box-shadow.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Resplandor</title>
  <style>
  body {
    background-color: #444;
    font-family: trebuchet ms;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    margin: 40px;
  }
  h1 {
    color: #ffa;
    text-shadow: 0 0 30px #fff;
  }
  input {
    font-size: 1.1em;
    background-color: #ddd;
    border: 3px solid #9fc;
    border-radius: 5px;
    padding: 8px;
    width: 400px;
    box-shadow: 0 0 20px #4f9;
  }
  div {
    padding: 20px;
    background-color: #333;
    color: #ddd;
    width: 300px;
    font-size: 1.2em;
    box-shadow: 0 0 40px #03f;
    border-radius: 16px;
  }
  </style>
</head>
<body>
  <h1>Este texto tiene resplandor</h1>
  <br>
  <input type="text" value="Esto es un campo de texto...">
  <br><br>
  <div>Esta es una división normal con resplandor neón azul</div>
</body>
</html>

Conclusiones sobre efecto resplandor CSS

La posibilidad de crear efectos visuales (como un resplandor) no sólo añade un toque estético a tu página web, sino que te ayudará a mejorar tus habilidades en cuanto a diseño web. Además, la personalización con CSS va más allá, pues también influye en la usabilidad y en la experiencia del usuario. De esta manera, vamos a poder ajustar la apariencia de nuestro sitio web para poder adaptarlo tanto a nuestras necesidades como a la de los visitantes.

Al considerar esta posibilidad de personalización, no te olvides de considerar otras mejoras para la presentación de tu marca. El aspecto visual y la estructura de tu página web pueden potenciarse mediante como, por ejemplo, la elección de un dominio personalizado y un hosting web confiable que garanticen una experiencia que ayude a una mayor retención de usuarios.

La copia de seguridad que necesitas para tus dispositivos, tus proyectos y tus datos
Accede a tus archivos desde cualquier dispositivo y lugar de forma segura
pack
10 GB
Gratis
Consigue tu backup ahora