Bungee Layers
3D & Depth · Static · pure CSS
Three copies of your word overprinted in Bungee's purpose-built layer fonts — Bungee Shade drafts a real 3D block behind, Bungee Regular carries the bright face, and Bungee Inline cuts crisp highlight grooves on top. A grid stack aligns all three pixel-for-pixel, producing authentic multi-color dimensional signage no CSS text-shadow can fake.
How it works
Bungee Layers is a static 3d & depth text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Bungee Layers exposes 3 dedicated controls — Face Hue, Shade Tone and Inline Accent — 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
/* Bungee Layers — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Bungee', cursive, 'Bungee Inline', cursive, 'Bungee Shade', cursive (load from Google Fonts).
*/
.text-effect {
font-family: 'Bungee', cursive;
font-weight: 900;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
display: grid;
line-height: 1;
}
.text-effect > span {
grid-area: 1 / 1;
}
.text-effect .fx-shade {
font-family: 'Bungee Shade', cursive;
color: hsl(331 65% 32%);
}
.text-effect .fx-face {
font-family: 'Bungee', cursive;
color: hsl(123 88% 60%);
}
.text-effect .fx-inline {
font-family: 'Bungee Inline', cursive;
color: hsl(155 90% 85%);
}
Pure CSS — just add the .text-effect class to any element.
- Category
- 3D & Depth
- Type
- Static
- Browser support
- Bungee chromatic layer fonts; all modern browsers.
- Capabilities
- pure