Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Create white text with black shadow using CSS
The CSS text-shadow property is used to create a shadow effect behind text. To create white text with a black shadow, you need to set the text color to white and define the shadow parameters including color, offset, and blur radius.
Syntax
selector {
text-shadow: horizontal-offset vertical-offset blur-radius color;
}
Example
The following example creates white text with a black shadow using the text-shadow property −
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
padding: 20px;
}
h1 {
color: white;
text-shadow: 3px 3px 3px #000000;
font-size: 2.5em;
margin: 20px 0;
}
.example-text {
color: white;
text-shadow: 2px 2px 4px black;
font-size: 1.5em;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p class="example-text">This paragraph has white text with black shadow.</p>
<p>Above text has a text shadow effect.</p>
</body>
</html>
A large white heading "Heading One" with a black shadow appears on a light gray background. Below it, a white paragraph with black shadow reads "This paragraph has white text with black shadow." followed by a normal black text paragraph explaining the effect.
Understanding the Values
| Parameter | Description | Example Value |
|---|---|---|
| horizontal-offset | Horizontal distance of shadow from text | 3px (right), -3px (left) |
| vertical-offset | Vertical distance of shadow from text | 3px (down), -3px (up) |
| blur-radius | Blur effect applied to shadow (optional) | 3px (soft), 0px (sharp) |
| color | Color of the shadow | #000000, black, rgba(0,0,0,0.5) |
Conclusion
The text-shadow property effectively creates white text with black shadow by combining white text color with black shadow parameters. Adjust the offset and blur values to achieve different shadow effects.
Updated on: 2026-03-15T12:51:00+05:30
1K+ Views
Advertisements