Efectos de sombra de texto CSS y de cuadro (con ejemplos)

Con CSS3 puedes crear dos tipos de sombras: text-shadow(agrega sombra al texto) y box-shadow(agrega sombra a otros elementos).

Sombra de texto CSS3

La text-shadowpropiedad puede tomar hasta cuatro valores:

  • la sombra horizontal
  • la sombra vertical
  • el efecto de desenfoque
  • el color
Ejemplos:

Sombra de texto normal

h1 { text-shadow: 2px 2px 5px crimson; }
Ejemplo de sombra de texto normal

Efecto de texto brillante

h1 { text-shadow: 0 0 4px #00FF9C; }
Ejemplo de texto brillante

Varias sombras

Para lograr esto, simplemente agregue una coma entre dos (o más) conjuntos de valores:

h1 { color: white; text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5; }
Ejemplo de varias sombras con texto blanco

Sombra de caja CSS3

La box-shadowpropiedad puede tomar hasta seis valores:

  • (opcional) la insetpalabra clave (cambia la sombra a una dentro del marco)
  • la sombra horizontal
  • la sombra vertical
  • el efecto de desenfoque
  • la difusión
  • el color
Ejemplos:
.first-div { box-shadow: 1px 1px 5px 3px grey; } .second-div { box-shadow: 0 0 5px 1px lightgrey; } .third-div { box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75); }
Ejemplos de sombra de caja

Más información:

  • Documentos web de MDN
  • Compruebe la compatibilidad con el navegador
  • Generador de sombras de caja CSS (siéntase libre de experimentar con sombras de caja)