Adding shadow to text makes it look beautiful. If you are looking for “How To Add Shadow To Text In CSS?”, Here is an example of how to add a shadow to text using CSS:

HTML:

<p class="shadow-text">Text with shadow</p>

CSS: 

.shadow-text {
  text-shadow: 2px 2px 2px gray;
}

This will add a gray shadow to the ‘.shadow-text’ element with an offset of 2px horizontally and 2px vertically, and a blur of 2px.

You can adjust the values of ‘text-shadow’ to change the appearance of the shadow:

  • The first value is the horizontal offset of the shadow. Positive values will move the shadow to the right, negative values to the left.
  • The second value is the vertical offset of the shadow. Positive values will move the shadow down, negative values up.
  • The third value is the blur distance. A higher value will create a softer shadow.
  • The final value is the color of the shadow.

Add Multiple Shadows To The Same Text

You can also add multiple shadows to the same text element:

.shadow-text {
  text-shadow: 2px 2px 2px gray, -2px -2px 2px gray;
}

This will add two shadows to the ‘.shadow-text’ element, one with an offset of 2px horizontally and 2px vertically, and another with an offset of -2px horizontally and -2px vertically.

You can also use the ‘filter’ property along with ‘drop-shadow()’ function to create a text shadow:

.shadow-text {
  filter: drop-shadow(2px 2px 2px gray);
}

This will create a shadow on the ‘.shadow-text’ element similar to ‘text-shadow’ property with the same offset and blur.

It’s also important to note that some older browsers may not support the ‘text-shadow’ property, but the ‘filter’ property is widely supported across all browsers.

Also Read:

Categorized in:

HTML & CSS

Tagged in:

,