box-shadow
box-shadow adds a shadow around an element’s box, defined by horizontal offset, vertical offset, blur radius, optional spread, and a color.
box-shadow Example
<style>
.card {
width: 160px;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
</style>
<div class="card">Card with a soft shadow</div>Output
box-shadow Values
| Value | Meaning |
|---|---|
| offset-x | Horizontal shadow position |
| offset-y | Vertical shadow position |
| blur-radius | How blurred the shadow edge is |
| spread-radius | How much the shadow expands or shrinks (optional) |
| color | The shadow’s color, usually with some transparency |
| inset | Makes the shadow appear inside the box instead of outside |
Multiple Shadows and inset
<style>
.layered {
width: 160px;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow:
0 1px 2px rgba(0,0,0,0.1),
0 8px 20px rgba(0,0,0,0.15);
}
.pressed {
width: 160px;
padding: 20px;
background: #eee;
border-radius: 8px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}
</style>
<div style="display: flex; gap: 20px;">
<div class="layered">Layered shadow</div>
<div class="pressed">Inset shadow</div>
</div>Output
text-shadow
text-shadow works similarly to box-shadow but applies to the glyphs of text, taking offset-x, offset-y, blur-radius, and color.
text-shadow Example
<style>
.glow {
color: white;
background: #222;
padding: 20px;
text-align: center;
text-shadow: 0 0 8px #4facfe;
font-size: 24px;
}
</style>
<div class="glow">Glowing Text</div>Output
The filter Property
filter applies graphical effects like blur, brightness, and grayscale — often used for image effects or hover states.
filter Examples
<style>
.swatch {
width: 80px;
height: 80px;
background: linear-gradient(45deg, #667eea, #f093fb);
display: inline-block;
margin-right: 10px;
}
.blurred { filter: blur(3px); }
.grayscale { filter: grayscale(100%); }
.bright { filter: brightness(1.4); }
</style>
<div class="swatch"></div>
<div class="swatch blurred"></div>
<div class="swatch grayscale"></div>
<div class="swatch bright"></div>Output
Best Practice
Use subtle, low-opacity shadows for a natural sense of elevation rather than large, dark, sharply defined ones — real-world shadows are soft and semi-transparent.