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
How to create a Gradient Shadow using CSS ?
The CSS gradient shadow effect creates stunning visual shadows using color gradients instead of traditional solid shadows. This technique combines the ::after pseudo-element with CSS gradient functions and filter properties to create eye-catching shadows that enhance UI design.
Syntax
.element::after {
content: "";
position: absolute;
inset: -0.5rem;
background: linear-gradient(direction, color1, color2, ...);
/* or */
background: radial-gradient(color1, color2, ...);
filter: blur(value);
z-index: -1;
}
Method 1: Linear Gradient Shadow
Linear gradient shadows create directional color transitions that flow in a specified direction. This method is perfect for creating dramatic, directional lighting effects
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #1a1a1a;
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.linear-shadow-card {
position: relative;
background: #000;
padding: 30px;
border-radius: 15px;
color: white;
text-align: center;
font-family: Arial, sans-serif;
}
.linear-shadow-card::after {
content: "";
position: absolute;
inset: -0.8rem;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7);
filter: blur(20px);
z-index: -1;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="linear-shadow-card">
<h2>Linear Gradient Shadow</h2>
<p>Beautiful directional shadow effect</p>
</div>
</body>
</html>
A dark card with colorful linear gradient shadow appears, creating a vibrant directional glow effect around the card edges.
Method 2: Radial Gradient Shadow
Radial gradient shadows emanate from a central point, creating circular or elliptical color transitions that provide a spotlight or halo effect
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #0f0f0f;
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.radial-shadow-card {
position: relative;
background: #1a1a1a;
padding: 40px;
border-radius: 20px;
color: white;
text-align: center;
font-family: Arial, sans-serif;
border: 1px solid #333;
}
.radial-shadow-card::after {
content: "";
position: absolute;
inset: -1rem;
background: radial-gradient(circle, #ff3068, #ff8c42, #ffb74d, transparent);
filter: blur(25px);
z-index: -1;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="radial-shadow-card">
<h2>Radial Gradient Shadow</h2>
<p>Glowing circular shadow effect</p>
</div>
</body>
</html>
A card with a warm orange-to-red radial gradient shadow appears, creating a glowing halo effect that emanates from the center outward.
Key Properties
| Property | Purpose | Typical Values |
|---|---|---|
inset |
Controls shadow spread | -0.5rem to -2rem |
filter: blur() |
Creates the shadow effect | 10px to 30px |
z-index |
Places shadow behind element | -1 or negative value |
position: absolute |
Enables pseudo-element positioning | Required for ::after |
Conclusion
Gradient shadows offer a modern alternative to traditional box-shadow effects. Use linear gradients for directional lighting effects and radial gradients for glow or spotlight effects. Adjust the inset and blur values to control the shadow's size and intensity.
1K+ Views
