Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add shadow effects to text with CSS
The shadow effects are applied to the text, which helps to improve the design and style of the style. Our website can be made more visually appealing by using the CSS shadow. These are the visual effects of drawing that look like an object’s shadow, which helps the objects have a 3-dimensional appearance. For adding shadows to texts and elements in CSS, the text-shadow and box-shadow properties are used. now, we are going to discuss about the text-shadow property.
CSS text-shadow property
The CSS text shadow is a property, which will add the shadow to text. A list of shadows that can be applied to your text will be accepted by the property. It can also be animated, which is a significant feature as it can make your website more visually appealing.
Syntax
Following is the syntax for CSS text-shadow property −
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Example
Let's look at the following example, where we are going to use the simplest way of adding shadow effect.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
text-align: center;
font-size: 40px;
background-color: #D5F5E3;
color: #DE3163;
}
p {
text-shadow: 4px 3px;
}
</style>
</head>
<body>
<p> TUTORIALSPOINT </p>
</body>
</html>
When we run the above code, it will generate an output consisting of text applied with shadow effect displayed on the webpage.
Example
Considering another scenario, where we are going to apply the shadow effect along with the CSS colors
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
text-align: center;
font-size: 40px;
background-color: #D5F5E3;
color: #17202A;
}
p {
text-shadow: 4px 3px tomato;
}
</style>
</head>
<body>
<p> TUTORIALSPOINT </p>
</body>
</html>
On running the above code, the output window will pop up displaying the text applied with shadow effect on the webpage
Example
In the following example, we are going to apply the shadow effect along with a blur for the text.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
text-align: center;
font-size: 50px;
background-color: #FEF9E7;
color: #FDFEFE;
}
p {
text-shadow: 5px 3px 3px #17202A;
}
</style>
</head>
<body>
<p> TUTORIALSPOINT </p>
</body>
</html>
When we run the above code, it will generate an output consisting of the text applied with shadow effect displayed on the webpage
203 Views
