Tutorials References Exercises Certificates Search...
Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C C++ C# BOOTSTRAP R
CSS Shadow Effects
❮ Previous Next ❯
Tutorials References Exercises Certificates Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA With
PHP CSS
HOW TO you
[Link]
C create
C++ C#shadow
BOOTSTRAP R
effects!
Hover over me!
Shadows
REMOVE ADS
CSS Tutorials
Text Shadow
References Exercises Certificates Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C C++ C# BOOTSTRAP R
The CSS text-shadow property applies a shadow to text.
In its simplest use, you only specify the horizontal and the vertical shadow.
In addition, you can add a shadow color and blur effect.
Text shadow effect!
Example
Horizontal and vertical shadow:
h1 {
text-shadow: 2px 2px;
}
Try it Yourself »
Next, add a color to the shadow:
Text shadow effect!
Example
Horizontal and vertical shadow, with color:
Tutorials References Exercises Certificates Sign In
h1 {
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C C++ C# BOOTSTRAP R
text-shadow: 2px 2px red;
}
Try it Yourself »
Then, add a blur effect to the shadow:
Text shadow effect!
Example
Horizontal and vertical shadow, with color and blur effect:
h1 {
text-shadow: 2px 2px 5px red;
}
Try it Yourself »
The following example shows a white text with black shadow:
Text shadow effect!
Tutorials
Example
References Exercises Certificates Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C C++ C# BOOTSTRAP R
Text-shadow on a white text:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
Try it Yourself »
The following example shows a red neon glow shadow:
Text shadow effect!
Example
Text-shadow with red neon glow:
h1 {
text-shadow: 0 0 3px #ff0000;
}
Try it Yourself »
Tutorials References Exercises Certificates Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C C++ C# BOOTSTRAP R
REMOVE ADS
Multiple Shadows
To add more than one shadow to the text, you can add a comma-separated list of shadows.
The following example shows a red and blue neon glow shadow:
Text shadow effect!
Example
h1text-shadow:
{
Tutorials References Exercises Certificates
0 0 3px #ff0000, 0 0 5px #0000ff;
Sign In
}
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C C++ C# BOOTSTRAP R
Try it Yourself »
The following example shows a white text with black, blue, and darkblue shadow:
Text shadow effect!
Example
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Try it Yourself »
You can also use the text-shadow property to create a plain border around some text (without shadows):
Border around text!
REMOVE ADS
Tutorials
Example
References Exercises Certificates Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C C++ C# BOOTSTRAP R
h1 {
color: coral;
Click on ► to watch the video
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
Try it Yourself »
?
Exercise
What are the minimum values required to define a text shadow?
Horizontal and vertical shadow values
Horizontal shadow, vertical shadow, and blur radius
Horizontal shadow, vertical shadow, blur radius, and color
Color and blur radius
Submit Answer »
❮ Previous
Tutorials References Exercises Certificates
Sign in to track progress
Sign In
Next ❯
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C C++ C# BOOTSTRAP R
COLOR PICKER
Tutorials References Exercises Certificates Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C C++ C# BOOTSTRAP R
-->
PLUS SPACES GET CERTIFIED
FOR TEACHERS BOOTCAMPS CONTACT US
Top Tutorials Top References
HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial [Link] Reference
[Link] Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
PHP Tutorial HTML Colors
Java Tutorial Java Reference
C++ Tutorial AngularJS Reference
jQuery Tutorial jQuery Reference
Top Examples Get Certified
HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
[Link] Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
Tutorials jQuery Examples
References Exercises Certificates XML Certificate
Sign In
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C C++ C# BOOTSTRAP R
FORUM ABOUT ACADEMY
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookies and privacy policy.
Copyright 1999-2026 by Refsnes Data. All Rights Reserved. W3Schools is Powered by [Link].