Languages
[Edit]
EN

CSS - text shadow

3 points
Created by:
Violetd
415

In this article, we would like to show you how to add text shadow using CSS.

Quick solution:

p {
    text-shadow: 1px 1px 2px black;  /* text-shadow: offset-x offset-y blur-radius shadow-color */
}

Example:

Example text-shadow configurations using CSS.
Example text-shadow configurations using CSS.

 

Practical example

In this example, we present three different text shadows depending on the number of arguments.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div {
      	margin-top: 15px;
      	font-size: 20px;
    }

    .shadow1 { text-shadow: 5px 5px; }             /* offset-x offset-y */
    .shadow2 { text-shadow: 3px 3px #ffb8b8; }     /* offset-x offset-y shadow-color */
    .shadow3 { text-shadow: 2px 2px 2px yellow; }  /* offset-x offset-y blur-radius shadow-color */
    .shadow4 { text-shadow: 2px 2px 10px blue; }   /* offset-x offset-y blur-radius shadow-color */

  </style>
</head>
<body>
  <div class="shadow1">Example text...</div>
  <div class="shadow2">Example text...</div>
  <div class="shadow3">Example text...</div>
  <div class="shadow4">Example text...</div>
</body>
</html>

References

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join