home ~ projects ~ socials

Add A Drop Shadow To Text With CSS

Single Shadow

.selector {
  text-shadow: 1px 1px 2px rgb(0 0 0 / 0.7);
}

Multiple Shadows

.selector {
  text-shadow:
     2px  2px 2px rgb(0 0 255 / 0.9),
    -2px -2px 2px rgb(255 0 0 / 0.9);
}

These examples use the following format for variables:

offset-x,  offset-y, blur-radius, color

Other formats are:

offset-x, offset-y

offset-x, offset-y, color

color, offset-x, offset-y

color, offset-x, offset-y, blur-radius
-- end of line --

References