CSS Text Shadow

CSS Text Shadow: As its name implies, this CSS property adds shadows to the text. It acknowledges the comma-separated list of shadows that applied to the text. It’s default property is none. It applies one or more than one text-shadow effect on the element’s text content.

Text Shadow

The text-shadow property adds shadow to text.

In its most straightforward use, you just specify the horizontal shadow (2px) and the vertical shadow (2px):

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Next, add a color (red) to the shadow:

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Then, at that point, add a blur impact (5px) to the shadow:

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

All CSS Text Properties

PropertyDescription
colorSets the color of text
directionSpecifies the text direction/writing direction
letter-spacingIncreases or decreases the space between characters in a text
line-heightSets the line height
text-alignSpecifies the horizontal alignment of text
text-decorationSpecifies the decoration added to text
text-indentSpecifies the indentation of the first line in a text-block
text-shadowSpecifies the shadow effect added to text
text-transformControls the capitalization of text
text-overflowSpecifies how overflowed content that is not displayed should be signaled to the user
unicode-bidiUsed together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-alignSets the vertical alignment of an element
white-spaceSpecifies how white-space inside an element is handled
word-spacingIncreases or decreases the space between words in a text

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.


0 Comments

Leave a Reply

Avatar placeholder