Pixel 8-Bit
Retro & Themed · Static · pure CSS
Blocky 8-bit lettering faked with hard stepped text-shadows and crisp edges. An instant retro-game headline.
CSS
/* Pixel 8-Bit — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Archivo Black', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Archivo Black', sans-serif;
font-weight: 700;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
color: hsl(310 85% 60%);
font-weight: 800;
letter-spacing: 0.06em;
image-rendering: pixelated;
-webkit-font-smoothing: none;
text-shadow:
3px 3px 0 hsl(310 80% 38%),
6px 6px 0 hsl(310 80% 38%),
9px 9px 0 hsl(310 80% 38%),
12px 12px 0 hsl(310 80% 38%),
-3px 0 0 #0a0a12,
3px 0 0 #0a0a12,
0 -3px 0 #0a0a12,
0 3px 0 #0a0a12,
-3px -3px 0 #0a0a12,
3px -3px 0 #0a0a12,
-3px 3px 0 #0a0a12,
15px 15px 0 #0a0a12;
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Retro & Themed
- Type
- Static
- Browser support
- All modern browsers
- Capabilities
- pure