How to set inner text shadow with CSS ?

Improve Article

Save Article

Like Article

CSS is a style sheet language that describes the document’s presentation written with HTML or similar markup languages. In this tutorial, we are going to learn how to set inner text shadow with CSS.

Approach: Text shadow is used to design the text elements such as paragraphs, heading, etc. We first set the background color and made the text color transparent. Then we clip the background according to the text to get that part only. Finally, we put the blurred text-shadow in front of the text which gives the inner text-shadow.

Syntax of inner text-shadow:

text-shadow: offset-x | offset-y | blur-radius | colour
background-clip: text;
color: transparent;
  • offset-x: This specifies the distance of the shadow from the text in x-axes.
  • offset-y: This specifies the distance of the shadow from the text in y-axes.
  • blur-radius: The higher the value, the bigger the shadow and light.
  • color (text-shadow): It specifies the shadow color.
  • background-clip: This specifies the clipping element which is a text here.
  • color: This specifies the color of the text. We want it transparent here.

Example: In the following example shows the inner text-shadow with zero offsets on both axes.

HTML

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" 

          content="IE=edge" />

    <meta name="viewport" 

          content="width=device-width, initial-scale=1.0" />

    <style>

      .inner {

        background-color: #565656;

        font: bold 48px 'Futura';

        color: transparent;

        text-shadow: 0px 0px 3px rgba(91, 255, 76, 0.8);

        -webkit-background-clip: text;

        -moz-background-clip: text;

        background-clip: text;

      }

    </style>

  </head>

  <body>

    <center>

      <div>

        <h1 style="color: green;">

          GeeksforGeeks

        </h1>

      </div>

      <strong>

        How to set inner text shadow with CSS ?

      </strong>

      <br />

      <br />

      <p class="inner">

        Welcome to GeeksforGeeks

      </p>

  

    </center>

  </body>

</html>

Output

 

By Julio MarchiPosted on