In the upcoming sections, you will explore the following properties for adding shadow effects in CSS:
The CSS text-shadow property adds shadow effects to text.
In its basic form, you define the horizontal shadow (2px) and the vertical shadow (2px).
Example
| h1 { text-shadow: 2px 2px; } |
Subsequently, incorporate a color for the shadow effect.
Example
| h1 { text-shadow: 2px 2px red; } |
Afterwards, introduce a blur effect to the shadow.
Example
| h1 { text-shadow: 2px 2px 5px red; } |
Below is an example illustrating white text with a black shadow.
Example
| h1 { color: white; text-shadow: 2px 2px 4px #000000; } |
Here is an example displaying a red neon glow shadow.
Example
|
h1 { |
To incorporate multiple shadows to the text, you can specify a comma-separated list of shadows.
Here is an example illustrating a red and blue neon glow shadow.
Example
| h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } |
Below is an example demonstrating white text with black, blue, and dark blue shadows.
Example
| h1 { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; } |
The text-shadow property can also be utilized to generate a simple border around text, devoid of shadows.
Example
| h1 { color: coral; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } |
