The text-shadow feature in CSS adds a shadow to text. It takes a list of shadows separated by commas, which are added to the text and the decoration of that text. Each shadow is described by a combination of X and Y offset, blur radius, and color.
text-shadow: /* offset-x | offset-y | blur-radius | color */To elaborate a bit more – each shadow is defined by two or three values followed by the color value (optional). The first two
We won’t expand further on the values, but text shadows can add emphasis, uniqueness, depth, and volume to text, and they are undoubtedly a tool that many designers use for this purpose.
Common text-shadow Patterns
Before we dive into the creative stuff, here are three text-shadow patterns you’ll reach for again and again in real projects.
1. Subtle Drop Shadow
The most common use. A soft offset shadow that lifts text off the page and improves readability on busy backgrounds.
.drop-shadow {
color: #2c2c2c;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}2. Emboss / Letterpress
A 1px light shadow below dark text creates an embossed look. Flip it – a 1px dark shadow above light text – for an engraved effect. The illusion only works when text color and shadow color are tuned to match the background, so adjust all three together when using this on a different surface.
/* Emboss: slightly darker text on light background */
.emboss {
background: #c8c4bc;
color: #a8a49c;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Engrave: slightly lighter text on dark background */
.engrave {
background: #3a3a3a;
color: #555;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6),
0 1px 0 rgba(255, 255, 255, 0.12);
}3. Hard Outline / Stroke
Multiple zero-blur shadows at small offsets in every direction create a solid outline around text – a reliable alternative to -webkit-text-stroke.
.outline {
color: white;
text-shadow:
-2px -2px 0 #1a1a2e,
2px -2px 0 #1a1a2e,
-2px 2px 0 #1a1a2e,
2px 2px 0 #1a1a2e,
0 -2px 0 #1a1a2e,
0 2px 0 #1a1a2e,
-2px 0 0 #1a1a2e,
2px 0 0 #1a1a2e;
}4. Readable Body Text
A barely-there shadow that sharpens body copy against textured or off-white backgrounds. You won’t notice the shadow directly, but remove it and the text feels flatter.
.readable-body {
color: #3a3a3a;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}Interactive text-shadow Playground
Drag the sliders to see how each shadow property changes the effect in real time. Every demo includes a live code output you can copy directly into your project.
.neon {
background: #0a0a12;
color: #00fff5;
font-family: 'Monoton', cursive;
text-shadow:
0 0 15px #00fff5,
0 0 30px #00fff5,
0 0 60px rgba(0, 255, 245, 0.4),
0 0 90px rgba(0, 255, 245, 0.2),
0 0 120px rgba(0, 180, 255, 0.1);
animation: neon-flicker 4s ease-in-out infinite;
}.retro-3d {
background: #fef0e1;
color: #e84040;
font-family: 'Dela Gothic One', sans-serif;
text-shadow:
3px 3px 0 #c0392b,
6px 6px 0 #d35400,
9px 9px 0 #e67e22,
12px 12px 0 #f39c12,
15px 15px 0 #f1c40f,
18px 18px 0 #e74c3c;
}.glitch {
background: #0d0d0d;
color: #fff;
font-family: 'Space Mono', monospace;
text-shadow:
-5px 0 0 #ff006e,
5px 0 0 #00f5d4;
animation: glitch-shift 0.4s steps(2) infinite;
}.letterpress {
background: #a89b8c;
color: #8a7d6e;
font-family: 'Tinos', serif;
letter-spacing: 4px;
text-shadow:
0 -3px 1px rgba(255, 255, 255, 0.15),
0 3px 3px rgba(0, 0, 0, 0.35);
}.rainbow {
background: #1a1a2e;
color: #fff;
font-family: 'Righteous', sans-serif;
text-shadow:
3px 3px 2px rgba(255, 0, 0, 0.7),
6px 6px 4px rgba(255, 127, 0, 0.7),
8px 8px 6px rgba(255, 255, 0, 0.7),
11px 11px 8px rgba(0, 200, 80, 0.7),
14px 14px 10px rgba(0, 127, 255, 0.7),
17px 17px 12px rgba(75, 0, 130, 0.7),
20px 20px 14px rgba(148, 0, 211, 0.7);
}.frosted {
background: linear-gradient(135deg, #667eea, #764ba2);
color: rgba(255, 255, 255, 0.85);
font-family: 'Heebo', sans-serif;
text-shadow:
0 0 30px rgba(255, 255, 255, 0.6),
0 0 60px rgba(255, 255, 255, 0.3);
backdrop-filter: blur(2px);
}.fire {
background: #1c1c1c;
color: #ffd54f;
font-family: 'Dela Gothic One', sans-serif;
text-shadow:
0 0 6px #ffd54f,
0 -6px 10px #ffab00,
0 -14px 20px #ff6d00,
0 -20px 30px #dd2c00,
0 -26px 40px rgba(100, 0, 0, 0.6),
0 -40px 60px rgba(80, 80, 80, 0.3),
0 -60px 80px rgba(60, 60, 60, 0.15);
}.blueprint {
background: #0a1628;
background-image:
linear-gradient(rgba(65, 145, 255, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(65, 145, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
color: #4191ff;
font-family: 'Space Mono', monospace;
text-shadow:
2px 0 0 rgba(65, 145, 255, 0.4),
-2px 0 0 rgba(65, 145, 255, 0.4),
0 2px 0 rgba(65, 145, 255, 0.4),
0 -2px 0 rgba(65, 145, 255, 0.4);
}.long-shadow {
background: #2ecc71;
color: #fff;
font-family: 'Dela Gothic One', sans-serif;
text-shadow:
1px 1px 0 rgba(0, 0, 0, 0.29),
2px 2px 0 rgba(0, 0, 0, 0.28),
/* ... layers continue diagonally ... */
30px 30px 0 rgba(0, 0, 0, 0.00);
}.cosmic {
background: radial-gradient(ellipse at center, #1a0533, #0a0118);
color: #e8d5f5;
font-family: 'Righteous', sans-serif;
text-shadow:
8px 0 0 #9b59b6,
0 8px 0 #f1c40f,
-8px 0 0 #1abc9c;
animation: cosmic-orbit 3s linear infinite;
}.typewriter {
background: #f5f0e8;
color: #1a1a1a;
font-family: 'Space Mono', monospace;
text-shadow:
2px 0 0 rgba(26, 26, 26, 0.6),
0 2px 1px rgba(26, 26, 26, 0.3),
1px 1px 4px rgba(26, 26, 26, 0.15);
}.chrome {
background: linear-gradient(160deg, #2c3e50, #1a1a2e);
color: #d0d0d0;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 6px;
text-shadow:
0 -3px 0 rgba(255, 255, 255, 0.3),
0 3px 0 rgba(0, 0, 0, 0.4),
0 -4px 2px rgba(255, 255, 255, 0.15),
0 4px 4px rgba(0, 0, 0, 0.5),
0 8px 12px rgba(0, 0, 0, 0.3);
}.pulse {
background: #0e0e1a;
color: #ff6b9d;
font-family: 'Righteous', sans-serif;
text-shadow:
0 0 8px #ff6b9d,
0 0 15px #ff6b9d,
0 0 30px rgba(255, 107, 157, 0.5),
0 0 45px rgba(255, 107, 157, 0.2);
animation: pulse-glow 2s ease-in-out infinite;
}.electric {
background: #05050f;
color: #e0f0ff;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 4px;
text-shadow:
2px 0 3px #00d4ff,
-1px 1px 6px #0088ff,
0 0 12px rgba(0, 150, 255, 0.3);
animation: electric-spark 1s steps(3) infinite;
}.duotone {
background: #f5f5f0;
color: #1a1a1a;
font-family: 'Playfair Display', serif;
font-weight: 900;
text-shadow:
-5px -5px 0 #e84393,
5px 5px 0 #0984e3;
}More text-shadow Examples
.plaster {
background-color: #8a7e70;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255, 255, 255, 0.50) 0 2px 4px;
letter-spacing: 12px;
font-family: 'Bebas Neue', sans-serif;
text-transform: uppercase;
}.california {
background: #1a0a0a;
color: tomato;
text-shadow:
0 0 10px orangered,
0 0 20px firebrick,
0 0 40px maroon,
0 0 80px darkred;
filter: saturate(60%);
animation: flicker steps(100) 3s 3s infinite;
font-family: 'Marck Script', cursive;
}
@keyframes flicker {
50% {
color: white;
filter: saturate(200%) hue-rotate(20deg);
}
}.caricature {
background: #e82850;
color: white;
font-family: 'Dela Gothic One', sans-serif;
letter-spacing: 5px;
text-shadow:
0 -4px 0 #212121, 0 4px 0 #212121,
-4px 0 0 #212121, 4px 0 0 #212121,
-4px -4px 0 #212121, 4px -4px 0 #212121,
-4px 4px 0 #212121, 4px 4px 0 #212121,
-4px 9px 0 #212121, 0 9px 0 #212121, 4px 9px 0 #212121,
0 19px 1px rgba(0, 0, 0, .1),
0 4px 2px rgba(0, 0, 0, .3),
0 12px 4px rgba(0, 0, 0, .2),
0 9px 9px rgba(0, 0, 0, .25),
0 24px 24px rgba(0, 0, 0, .2),
0 36px 36px rgba(0, 0, 0, .15);
}.moving-shadow {
background: #2a2a3a;
color: #ffd54f;
font-family: 'Dela Gothic One', sans-serif;
text-shadow:
1px 1px 2px rgba(0, 0, 0, 0.7),
5px 5px 1px #ff6b00,
6px 6px 2px rgba(0, 0, 0, 0.7),
10px 10px 1px #e84040,
11px 11px 2px rgba(0, 0, 0, 0.7),
15px 15px 1px #9b59b6,
16px 16px 2px rgba(0, 0, 0, 0.7);
animation: text-snake 1s infinite alternate;
}
@keyframes text-snake {
from {
text-shadow:
1px 1px 2px rgba(0, 0, 0, 0.7),
5px 5px 1px #ff6b00,
6px 6px 2px rgba(0, 0, 0, 0.7),
10px 10px 1px #e84040,
11px 11px 2px rgba(0, 0, 0, 0.7),
15px 15px 1px #9b59b6,
16px 16px 2px rgba(0, 0, 0, 0.7);
}
to {
text-shadow:
-1px 1px 2px rgba(0, 0, 0, 0.7),
-5px 5px 1px #ff6b00,
-6px 6px 2px rgba(0, 0, 0, 0.7),
-10px 10px 1px #e84040,
-11px 11px 2px rgba(0, 0, 0, 0.7),
-15px 15px 1px #9b59b6,
-16px 16px 2px rgba(0, 0, 0, 0.7);
}
}Summary
With the right fonts and colors, impressive shadows can be achieved using the text-shadow feature. Do not hesitate to use more than one shadow to achieve the desired results. Moreover, as you may have noticed in one of the examples, animations can be added to shadows to achieve very nice effects…
Which shadow did you like the most? Tell us in the comments, and if you have created some cool shadows, share them with us in the comments and I will add them to the article…
