Con CSS puedes agregar sombra al texto y a los elementos. En estos capítulos aprenderá acerca de las siguientes propiedades:

  • text-shadow
  • box-shadow

La propiedad text-shadow aplica sombra al texto. En su uso más simple, solo especificas la sombra horizontal (2px) y la sombra vertical (2px).

Ejm

h1 {
  text-shadow: 2px 2px;
}

Ahora añadimos un color a la sombra

h1 {
  text-shadow: 2px 2px red;
}

Ejm con múltiples sombras

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

La propiedad box-shadow se utiliza para aplicar una o más sombras a un elemento.

Para especificar una sombra horizontal y vertical podemos utilizar la siguiente sintaxis.

div {
  box-shadow: 10px 10px;
}

Para especificar un color a la sombra utilizamos la siguiente sintaxis

div {
  box-shadow: 10px 10px lightblue;
}