Sobes.tech
Junior

How can a shadow be created from text?

sobes.tech AI

Answer from AI

.text-shadow-effect {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Horizontal offset, vertical offset, blur radius, shadow color with transparency */
}

The text-shadow property allows you to create a shadow for text. It accepts up to four values: horizontal offset, vertical offset, blur radius, and shadow color.

  • Horizontal offset: A positive value shifts the shadow to the right, a negative value to the left.
  • Vertical offset: A positive value shifts the shadow downward, a negative upward.
  • Blur radius: The larger the value, the more blurred the shadow will be. A zero value creates a sharp shadow.
  • Color: The color of the shadow, which can be any valid CSS color value (e.g., #000, rgb(0,0,0), rgba(0,0,0,0.5)).

You can use multiple shadows by listing them separated by commas:

.multiple-text-shadows {
  text-shadow: 2px 2px 4px rgba(255, 0, 0, 0.7), -2px -2px 4px rgba(0, 0, 255, 0.7);
}