Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 Multiple Shadows to Text with CSS
Whether in graphic design, photography, or even on a web page, adding shadows is a massive technique to create the appearance of depth and perspective. It is not necessary to open Photoshop or another visual editing program in order to apply this kind of effect to text, images, and other elements on a web page it can be done by using the CSS3 properties. You can make use of two properties. The majority of browsers support both of these features, they are listed below −
text-shadow
box-shadow
Add the comma-separated list of shadows to add more than one shadow, with the CSS.
Using 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 text-shadow property and applying shadow to the text.
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-family: verdana;
text-shadow: 1px 1px 2px #DE3163, 2px 3px 9px #7D3C98;
}
</style>
</head>
<body>
<p class="text">Mahendra Singh Dhoni is an Indian professional cricketer, who plays as a wicket-keeper-batsman. Widely regarded as one of the world's greatest wicket-keeper-batsmen and captains in the history of the sport, he is known for his explosive batting, wicket-keeping and leadership skills.</p>
</body>
</html>
When we run the above code, it will generate an output consisting of the shadow applied to it displayed on the webpage.
Using CSS box-shadow property
An HTML element can have more than one shadow applied to it by using the box shadow property. By putting a comma between each pair of values, you can alter each shadow effect. The shadow's position with respect to the HTML element is determined by the offset-x and offset-y values. A shadow can have up to six different values. The values for offset-x and offset-y must be provided.
Syntax
Following is the syntax for CSS box-shadow property −
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Example
In the following example, we are going to add the shadow using the CSS box-shadow property
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 100px;
}
.tp {
width: 270px;
height: 200px;
font-family: verdana;
font-size: 30px;
color: #DE3163;
background-color: #FEF9E7;
box-shadow: 7px 7px 10px #BB8FCE, -6px -6px 12px #ABEBC6;
}
</style>
</head>
<body>
<div class="tp">WELCOME</div>
</body>
</html>
On running the above code, the output window will pop up, displaying the text applied with shadows displayed on the webpage.
1K+ Views
