How to apply shadow effect on text using CSS

Topic: HTML / CSS« Prev|Next

Answer: Use the CSS text-shadow property

You can use the CSS text-shadow property to apply the shadow effect (like Photoshop drop-shadow style) on text elements. You can also apply more than one shadow (applied front-to-back) through providing a comma-separated list of shadows.

Each shadow is specified as an offset from the text (horizontal and vertical), along with the blur radius value and optional color value. Check out the following example:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>CSS Text Shadow Effect</title>
  • <style type="text/css">
  •     p{
  •         font: 26px sans-serif;
  •     }
  •     p.shadow{
  •         text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  •     }
  •     p.shadow-multiple{
  •         text-shadow: 2px 2px 3px yellow, 3px 3px 5px red;
  •     }
  •     p.shadow-outline{
  •         color: #fff;
  •         text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
  •     }
  • </style>
  • </head>
  • <body>
  •     <p class="shadow">This is a simple example of text shadow effect.</p>
  •     <p class="shadow-multiple">This is a simple example of multiple text shadow effect.</p>
  •     <p class="shadow-outline">This is another example of multiple text shadow effect.</p>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Your Feedback:

We would love to hear from you, please drop us a line.