Rainbow Stack
Shadow & Press · Static · pure CSS
A staircase of hard, zero-blur shadow steps marches behind the neutral face, and every step gets its own distinct hue walking the color wheel — full rainbow spread or a tight analogous walk from your chosen start hue. The retro-poster spectral trail, tunable by step count, march angle, hue span, and starting hue.
How it works
Rainbow Stack is a static shadow & press text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Rainbow Stack exposes 4 dedicated controls — Steps, Angle, Hue Span and Start Hue — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Rainbow Stack — made with TEXT-FX · https://text-fx.app
* 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(0 4% 96%);
text-shadow:
-7.52px -2.74px 0 hsl(122 85% 58%),
-15.04px -5.47px 0 hsl(212 85% 58%),
-22.55px -8.21px 0 hsl(302 85% 58%),
-30.07px -10.94px 0 hsl(32 85% 58%);
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Shadow & Press
- Type
- Static
- Browser support
- All modern browsers
- Capabilities
- pure