CSS Shadows
Shadows make elements look like they float above the page. CSS has shadows for boxes and for text.
box-shadow
box-shadow draws a shadow around an element's box.
Example
box-shadow: offset-x offset-y blur spread color;| Value | Meaning | Example |
|---|---|---|
| offset-x | Moves the shadow right (negative moves left) | 4px |
| offset-y | Moves the shadow down (negative moves up) | 6px |
| blur | How soft the edge is; 0 gives a sharp edge | 12px |
| spread | Makes the shadow bigger or smaller than the box | 2px |
| color | Shadow colour, usually transparent black | rgba(0, 0, 0, 0.2) |
Only the two offsets are required. Blur and spread are optional.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8fafc;
display: flex;
gap: 24px;
flex-wrap: wrap;
padding: 20px;
}
.box {
width: 130px;
height: 90px;
background-color: white;
border-radius: 8px;
display: grid;
place-items: center;
text-align: center;
font-size: 14px;
}
.hard { box-shadow: 6px 6px 0 #264de4; }
.soft { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.big { box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.35); }
.glow { box-shadow: 0 0 16px 4px rgba(38, 77, 228, 0.5); }
.inner { box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25); }
</style>
</head>
<body>
<div class="box hard">Hard shadow</div>
<div class="box soft">Soft shadow</div>
<div class="box big">Lifted card</div>
<div class="box glow">Glow</div>
<div class="box inner">Inset</div>
</body>
</html>Inset Shadows
The keyword inset puts the shadow inside the box, so it looks pressed in. It is nice for input fields and pressed buttons.
Layered Shadows
You can give several shadows, separated by commas. Real shadows have a dark, sharp part close to the object and a soft, wide part further away. Two layers copy this and look more natural than one.
Example
.card {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 8px 24px rgba(0, 0, 0, 0.10);
}Good shadows are subtle. Use low opacity (0.1 to 0.25) and a little more blur than you think. A thick black shadow looks old-fashioned.
Shadows on Hover
Shadows work well with transitions. A card that "lifts" when you hover feels clickable.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.product {
width: 200px;
padding: 16px;
border-radius: 10px;
background-color: white;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s, transform 0.3s;
}
.product:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
transform: translateY(-4px);
}
</style>
</head>
<body>
<div class="product">
<h3>Kurta - Cotton</h3>
<p>Rs 2,200</p>
</div>
</body>
</html>text-shadow
text-shadow adds a shadow behind letters. It has no spread value and no inset.
Example
text-shadow: offset-x offset-y blur color;Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; background-color: #1e293b; padding: 20px; }
h1 { margin: 10px 0; }
.simple { color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); }
.neon { color: #fef08a; text-shadow: 0 0 6px #facc15, 0 0 18px #f97316; }
.outline {
color: #1e293b;
text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}
</style>
</head>
<body>
<h1 class="simple">Simple shadow</h1>
<h1 class="neon">Neon sign</h1>
<h1 class="outline">Outline text</h1>
</body>
</html>A light text shadow helps white text stay readable on top of a busy photo.
box-shadow vs drop-shadow()
box-shadow always follows the rectangle of the box (with its rounded corners). If an image has a transparent background, such as a PNG logo, the shadow still makes a rectangle.
The drop-shadow() filter follows the real shape of the visible pixels instead:
Example
.logo {
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}box-shadow | filter: drop-shadow() | |
|---|---|---|
| Follows | The box shape | The visible shape |
| Spread and inset | Yes | No |
| Several shadows | Comma-separated | Several drop-shadow() functions |
Exercise
Exercise
What does box-shadow: 0 0 10px red; create?