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
Add more than one shadow to a text with CSS
Whether in graphic design, photography, or even on a web page, adding shadows is a powerful technique to create depth and visual interest. You can apply multiple shadows to text using CSS without needing external image editing software. CSS provides two main properties for creating shadow effects −
text-shadow - for adding shadows directly to text
box-shadow - for adding shadows to elements containing text
To add multiple shadows with CSS, use a comma-separated list of shadow values.
Syntax
/* Multiple text shadows */ text-shadow: shadow1, shadow2, shadow3; /* Multiple box shadows */ box-shadow: shadow1, shadow2, shadow3;
Method 1: Using CSS text-shadow Property
The text-shadow property adds shadow effects directly to text characters. You can apply multiple shadows by separating each shadow definition with commas.
Syntax
text-shadow: h-offset v-offset blur-radius color;
Example
The following example applies two different colored shadows to create a layered effect −
<!DOCTYPE html>
<html>
<head>
<style>
.multi-shadow-text {
font-family: Arial, sans-serif;
font-size: 2em;
font-weight: bold;
color: #333;
text-align: center;
margin: 50px;
text-shadow: 2px 2px 4px #DE3163, 4px 4px 8px #7D3C98, 6px 6px 12px #3498DB;
}
</style>
</head>
<body>
<p class="multi-shadow-text">Multiple Text Shadows</p>
</body>
</html>
Large bold text "Multiple Text Shadows" appears with three layered shadows in different colors (pink, purple, and blue) creating a 3D depth effect.
Method 2: Using CSS box-shadow Property
The box-shadow property adds shadows to the entire element box. This approach is useful when you want to create complex shadow effects around text containers.
Syntax
box-shadow: h-offset v-offset blur-radius spread-radius color;
Example
In this example, we create multiple box shadows with both positive and negative offsets −
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 80px;
background-color: #f0f0f0;
}
.shadow-box {
width: 300px;
height: 150px;
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: bold;
color: #2C3E50;
background-color: #ECF0F1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
box-shadow: 5px 5px 15px #BDC3C7, -5px -5px 15px #FFFFFF, inset 2px 2px 5px #D5DBDB;
}
</style>
</head>
<body>
<div class="shadow-box">LAYERED SHADOWS</div>
</body>
</html>
A rounded rectangular box containing "LAYERED SHADOWS" text with multiple shadow effects: a gray shadow to the bottom-right, a white shadow to the top-left, and an inset shadow creating a pressed appearance.
Conclusion
Multiple shadows in CSS allow you to create sophisticated visual effects. Use text-shadow for direct text effects and box-shadow for container-based shadows. Combine different colors, offsets, and blur values to achieve unique depth effects.
2K+ Views
