Home 〉 CSS Tutorials 〉 CSS Text Shadow Property Explained with Examples - Learn How to Use 'text-shadow' in CSS

CSS Text Shadow Property Explained with Examples - Learn How to Use 'text-shadow' in CSS !

CSS Text Shadow Property Explained with Examples - Learn How to Use 'text-shadow' in CSS !

Want to add depth to your text elements? The CSS `text-shadow` property lets you apply shadow effects to text, enhancing readability and design. This tutorial demonstrates how to set horizontal and vertical shadows, blur radius, and color. Learn to create subtle or dramatic text effects to suit your design needs. Read the complete tutorial on CSS Text Shadow Property

CSS 'text-shadow' Property - Step-by-Step Guide with Examples

The 'text-shadow' property in CSS lets you apply shadow effects to text. It's a great way to make headings or titles stand out and enhance readability or design aesthetics.

Basic Syntax

Syntax ✍

selector {
text-shadow: horizontal-offset vertical-offset blur-radius color;
}

  • horizontal-offset - how far the shadow moves from the left/right.
  • vertical-offset - how far the shadow moves from the top/bottom.
  • blur-radius - how soft or sharp the shadow appears.
  • color - the color of the shadow.

Simple Text Shadow Example

html code 📝

<!DOCTYPE html>
<html>
<body>

<h2 style="text-shadow: 2px 2px 5px gray;">This is shadowed text</h2>

</body>
</html>

output 📌

This is shadowed text

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

  • '2px' right (horizontal offset)
  • '2px' down (vertical offset)
  • '5px' blur radius
  • 'gray' is the shadow color

Example with Colored Shadow

html code 📝

<!DOCTYPE html>
<html>
<body>

<p style="text-shadow: 1px 1px 3px red;">Red glowing text shadow</p>

</body>
</html>

output 📌

Red glowing text shadow

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This makes the text glow slightly with a red shadow, creating a subtle highlight.

Example with Multiple Shadows

You can apply multiple shadows for more effects:

html code 📝

<!DOCTYPE html>
<html>
<body>

<h3 style="text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;">Outlined Text</h3>

</body>
</html>

output 📌

Outlined Text

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Two shadows are added to give an outline-like appearance.

Tips for Using 'text-shadow'

  • Keep shadows subtle for readability.
  • Use contrasting shadow colors to highlight text.
  • Combine with large font sizes for headings.

Advanced Example - Neon Glow Effect

html code 📝

<!DOCTYPE html>
<html>
<body>

<h1 style="color: white; text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff;">
Glowing Neon Text
</h1>

</body>
</html>

output 📌

Glowing Neon Text

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

This creates a neon glow using layered shadows with the same color but increasing blur.

Conclusion

The 'text-shadow' property is simple but powerful. Whether you want to add a soft blur or bold glow, it helps you create more attractive headings, buttons, and more.

  • ✅ Use it to improve readability
  • ✅ Create emphasis or decoration
  • ✅ Experiment with colors and blur radius

Suggested Topics:

Related Topics:

FAQs - CSS 'text-shadow'

Q1: Can I use multiple shadows on one text?

Yes, separate them with commas.

Q2: Is 'text-shadow' supported in all browsers?

Yes, it's widely supported in all modern browsers.

Q3: What's the best use of text-shadow?

Use it for headings, highlighting text, or adding glow effects.

Q4: Can I animate text-shadow?

Yes, you can use CSS transitions or keyframes to animate 'text-shadow'.

Q5: Does 'text-shadow' affect layout or spacing?

No, it's just a visual effect and doesn't take up space.

Previous Post Next Post