Text Shadow in CSS

« Prev Next »

The CSS text-shadow property is used to apply shadow effects to text. Text shadows can add depth, emphasis, or style to your text, making it stand out and appear more visually interesting. With the text-shadow property, you can create a shadow that appears to be cast by the text itself, similar to how you might create shadows for boxes or other elements.

 

Text-shadow allows you to specify the horizontal and vertical offset of the shadow, as well as the blur radius and color. This can be a great way to create dynamic and visually interesting typography effects, as well as to add depth and emphasis to important text on your page.

css-text-shadow

Syntax Of Text Shadow

text-shadow: h-offset v-offset blur-radius color;
  • h-offset: Horizontal offset (required) — how far the shadow should be placed from the text horizontally. A positive value moves the shadow to the right, and a negative value moves it to the left.
  • v-offset: Vertical offset (required) — how far the shadow should be placed from the text vertically. A positive value moves the shadow down, and a negative value moves it up.
  • blur-radius: Blur radius (optional) — determines how blurry the shadow is. The higher the value, the more blurred the shadow will be.
  • color: The color of the shadow (optional) — can be a color keyword, hex, RGB, RGBA, etc.

Example: Basic Text Shadow

Let's start with a simple text shadow applied to a heading.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Text Shadow</title>
  <style>
    h1 {
      font-size: 48px;
      color: #3498db;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Horizontal offset, Vertical offset, Blur radius, Color */
    }
  </style>
</head>
<body>
  <h1>Text Shadow Example</h1>
</body>
</html>
Run ›

The text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); rule applies a shadow to the text:

 

  • 2px horizontal offset moves the shadow 2px to the right.
  • 2px vertical offset moves the shadow 2px down.
  • 5px blur radius gives the shadow a soft, blurry effect.
  • rgba(0, 0, 0, 0.3) is the color of the shadow (semi-transparent black).
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.