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
Animate box-shadow CSS property
The CSS box-shadow property can be animated to create dynamic shadow effects that enhance the visual appeal of elements. This animation smoothly transitions between different shadow states, creating engaging hover effects, floating animations, or attention-grabbing elements.
Syntax
selector {
box-shadow: h-offset v-offset blur spread color;
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
from { box-shadow: initial-shadow; }
to { box-shadow: final-shadow; }
}
Example: Animated Box Shadow
The following example demonstrates animating the box-shadow property with smooth transitions −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 200px;
height: 150px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
margin: 50px auto;
animation: shadowAnimation 3s ease-in-out infinite alternate;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
@keyframes shadowAnimation {
0% {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
100% {
box-shadow: 0 25px 50px rgba(102, 126, 234, 0.6);
}
}
</style>
</head>
<body>
<h2>Animating Box Shadow</h2>
<div class="animated-box">Animated Shadow</div>
</body>
</html>
A purple gradient box with rounded corners appears on the page. The shadow continuously animates from a small dark shadow to a larger, more prominent blue shadow, creating a floating effect that alternates back and forth.
Example: Multiple Shadow Animation
You can animate multiple shadows simultaneously for more complex effects −
<!DOCTYPE html>
<html>
<head>
<style>
.multi-shadow {
width: 180px;
height: 180px;
background: #ff6b6b;
border-radius: 50%;
margin: 60px auto;
animation: multiShadow 2s ease-in-out infinite;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
}
@keyframes multiShadow {
0% {
box-shadow:
0 0 20px rgba(255, 107, 107, 0.5),
0 0 40px rgba(255, 107, 107, 0.3);
}
50% {
box-shadow:
0 0 40px rgba(255, 107, 107, 0.8),
0 0 80px rgba(255, 107, 107, 0.6),
0 0 120px rgba(255, 107, 107, 0.4);
}
100% {
box-shadow:
0 0 20px rgba(255, 107, 107, 0.5),
0 0 40px rgba(255, 107, 107, 0.3);
}
}
</style>
</head>
<body>
<h2>Multiple Shadow Animation</h2>
<div class="multi-shadow">Glowing</div>
</body>
</html>
A red circular element appears with pulsating multiple shadows that create a glowing effect. The shadows expand and contract rhythmically, simulating a heartbeat or pulsing light effect.
Conclusion
Animating the box-shadow property creates engaging visual effects that can enhance user experience. Use keyframes to define smooth transitions between different shadow states for dynamic and interactive designs.
Updated on: 2026-03-15T13:14:04+05:30
1K+ Views
Advertisements