Propiedades CSS

La propiedad text-shadow agrega sombra al texto. Acepta una lista de sombras separadas por coma, para aplicarlas al texto y a la propiedad text-decorations del elemento.
Cada sombra es especificada como un ófset del texto, junto con valores de color y radio de difuminación opcionales.
Múltiples sombras son aplicadas del frente al fondo, en el mismo orden que sean definidas.
Sintaxis:
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #CCC 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558ABB;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
/* offset-x | offset-y
/* Se usan los valores predeterminados para color y blur-radius */
text-shadow: 5px 10px;
/* Valores globales */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;
En el primer ejemplo usamos "text-shadow: #929292 7px 7px 3px;" el primer atributo es el color, el segundo es la dirección (derecha), el tercero es la otra dirección (abajo), el cuarto es para expandir el área que abarca la sombra.

Ejemplo 1

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium fugiat accusantium modi a labore adipisci libero, reprehenderit deserunt vel soluta ullam aut vero inventore assumenda aliquam eveniet minima, sed atque. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

código:

HTML:

HTML

CSS:

CSS
En el segundo ejemplo usamos "text-shadow: #929292 -5px -5px 10px 5px;" el primer atributo es el color, el segundo es la dirección (izquierda), el tercero es la dirección (arriba), y el cuarto es para expandir el área que abarca la sombra.

Ejemplo 2

Lorem ipsum, dolor sit, amet consectetur adipisicing elit. Sit quidem quis magni, voluptatum eaque nobis dolore, omnis numquam nulla eligendi similique. Expedita ducimus quasi animi dicta iste at asperiores deleniti!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

código:

HTML:

HTML

CSS:

CSS