How to use text-shadow property In CSS
The text-shadow property in CSS adds a shadow effect to text, providing depth and emphasis. It takes parameters for horizontal and vertical offsets, blur radius, and color, allowing designers to create various text-shadow effects for improved visual appeal.
Syntax:
text-shadow: h-shadow v-shadow blur-radius color;
Property Values:
text-shadow property accepts a lot of values, some of them are mentioned in the table below.
| Property Value | Description |
|---|---|
h-shadow | Sets the horizontal shadow around the text. |
v-shadow | Sets the vertical shadow around the text. |
blur-radius | Sets the blur radius around the text shadow. |
color | Sets the color of the text shadow. |
none | Does not set anything around the text (no shadow). |
initial | Sets the text shadow to its default initial value. |
inherit | Inherits the property values from its parent element. |
Return Value:
It returns a font border/shadow around the text.
Font Border Examples
Example 1: This example uses text-shadow property to create shadow to the text.
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-shadow property
</title>
<style>
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
</body>
</html>
Output:
Example 2: This example uses text-shadow property to create bordered text.
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-shadow property
</title>
<!-- Style to use text-shadow property -->
<style>
.GFG {
color: white;
font-size: 50px;
text-shadow: -1px 1px 0 #000,
1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000;
}
</style>
</head>
<body>
<p class="GFG">w3wiki</p>
</body>
</html>
Output:
CSS Font Border
The CSS Font Border is a technique used to create a border-like outline around HTML text characters. This technique enhances visibility or adds a decorative effect to the text. It can be achieved using the text-stroke property, which allows customization of text appearance by adding a border around it.
Contact Us