Rainbow Stack
Shadow & Press · Static · pure CSS
A flat face over a chain of hard offset shadows whose hue walks each step, building a candy-colored 3D ribbon behind the letters.
CSS
/* Rainbow Stack — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Bricolage Grotesque', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
letter-spacing: -2px;
text-transform: none;
}
.text-effect {
color: hsl(126 18% 96%);
text-shadow: 1px 1px 0 hsl(153 80% 58%), 2px 2px 0 hsl(180 80% 58%), 3px 3px 0 hsl(207 80% 58%), 4px 4px 0 hsl(234 80% 58%), 5px 5px 0 hsl(261 80% 58%), 6px 6px 0 hsl(288 80% 58%), 7px 7px 0 hsl(315 80% 58%), 8px 8px 0 hsl(342 80% 58%), 9px 9px 0 hsl(9 80% 58%), 10px 10px 0 hsl(36 80% 58%);
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Shadow & Press
- Type
- Static
- Browser support
- All modern browsers
- Capabilities
- pure