CSS text shadow effects
I’m experimenting with CSS text shadow effects for the overlay labels of my livestream. I have also tried animating them but the overlay animation performance is slow so they remain still for now.
You may want to turn down the lights in this site if you have the lights on.
Neon Glow
/* Neon Glow 〰〰〰 */
h2 {
padding: 60px;
background: transparent;
color: #fff;
text-shadow:
0 0 7px #fff,
0 0 11px #fff,
0 0 23px #fff,
0 0 43px #00ffbb,
0 0 83px #00ffbb,
0 0 89px #00ffbb,
0 0 101px #00ffbb,
0 0 151px #00ffbb;
}
Delicate Shine
/* Delicate Shine 〰 */
h2 {
padding: 60px;
font-weight: normal;
letter-spacing: 1px;
background: transparent;
color: #fff;
text-shadow:
0 0 1px #e9e9dd,
0 0 3px #ff80ab,
0 0 6px #fff;
}
Fire Power
/* Fire Power ⽕ */
h2 {
padding: 60px;
background: transparent;
color: #fff;
text-shadow:
0 -1px 4px #fff,
0 -2px 10px #ff0,
0 -10px 20px #ff8000,
0 -18px 40px #f00,
2px 2px 3px rgba(233,101,62,0);
}
Blue Flame
/* Blue Flame 🜂 */
h2 {
padding: 60px;
background: transparent;
color: #fff;
text-shadow:
0 -1px 4px #00ffbb,
0 -2px 10px #18ffff,
0 -10px 20px #00e5ff,
0 -18px 40px #00ffbb;
}
Toned Down
/* Toned Down ~ */
h2 {
padding: 60px;
background: transparent;
color: #fff;
color: #ddd;
text-shadow:
-1px -1px 1px rgba(255,255,255,.1),
1px 1px 1px rgba(0,0,0,.5);
}
More will be added in time, and in the meantime come by to see them live at https://www.twitch.tv/hypertexthero!
· ˖ ✦ . ˳
Possibly Related:
- Image slideshow for OBS with captions generated from filenames of images in a folder
- Browser image slideshow for OBS
- Dark mode website theme switcher with CSS and JavaScript using localStorage instead of cookies
- ♫ Heart on Fire
- Sun
˳ · ˖
Prior entry: One Aborted Landing, One Successful Landing
Next entry: Wacom Intuos Mapping Screen Area Empty in macOS 13.1 Ventura