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
Selected Reading
Shadow Filter with CSS
The CSS shadow filter is used to create drop shadows for elements. This filter applies an attenuated shadow in the specified direction and color, giving a 3D appearance to text and images.
Syntax
selector {
filter: drop-shadow(offset-x offset-y blur-radius color);
}
Parameters
| Parameter | Description |
|---|---|
| offset-x | Horizontal offset of the shadow (positive = right, negative = left) |
| offset-y | Vertical offset of the shadow (positive = down, negative = up) |
| blur-radius | The blur effect applied to the shadow (optional, default is 0) |
| color | The color of the shadow |
Example: Drop Shadow on Text
The following example demonstrates how to apply a shadow filter to text −
<!DOCTYPE html>
<html>
<head>
<style>
.shadow-text {
font-size: 36px;
font-family: Arial, sans-serif;
color: #333;
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
margin: 20px;
}
.colored-shadow {
font-size: 28px;
font-weight: bold;
color: red;
filter: drop-shadow(3px 3px 5px blue);
margin: 20px;
}
</style>
</head>
<body>
<h1 class="shadow-text">Text with Shadow</h1>
<p class="colored-shadow">Colored Shadow Example</p>
</body>
</html>
A large heading "Text with Shadow" appears with a dark semi-transparent shadow offset 5px right and down. Below it, red text "Colored Shadow Example" displays with a blue shadow offset 3px right and down.
Example: Shadow on Images
You can also apply shadow filters to images for enhanced visual effects −
<!DOCTYPE html>
<html>
<head>
<style>
.shadow-image {
width: 200px;
height: 150px;
background-color: #4CAF50;
border-radius: 10px;
filter: drop-shadow(8px 8px 15px rgba(0, 0, 0, 0.3));
margin: 30px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
}
</style>
</head>
<body>
<div class="shadow-image">Image with Shadow</div>
</body>
</html>
A green rounded rectangle with white text "Image with Shadow" appears with a soft dark shadow extending 8px to the right and down, creating a floating effect.
Conclusion
The CSS drop-shadow() filter function creates realistic shadow effects for any element. It's more flexible than box-shadow as it follows the actual shape of the element, including transparent areas.
Updated on: 2026-03-15T11:31:32+05:30
534 Views
Advertisements