Art Deco
Retro & Themed · Static · pure CSS
A 1920s Gatsby poster treatment: a flat, graphic gold gradient clipped to the letters, framed by thin flanking rules that taper into diamond terminals, with a faint sunburst medallion glowing behind the whole word. Slide the hue from rose through gold to silver, tune the rule weight, and toggle the sunburst for period geometry with luxurious restraint.
How it works
Art Deco is a static retro & themed text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Art Deco exposes 3 dedicated controls — Gold Hue, Rule Weight and Sunburst — 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
/* Art Deco — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Major Mono Display', monospace (load from Google Fonts).
*/
.text-effect {
font-family: 'Major Mono Display', monospace;
font-weight: 700;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
display: inline-block;
position: relative;
padding: 27px 0.62em;
background-image: repeating-conic-gradient(from 0deg, hsl(33 60% 68% / 0.16) 0deg 2.4deg, transparent 2.4deg 15deg), linear-gradient(96deg, hsl(38 59% 74%) 0%, hsl(33 59% 55%) 48%, hsl(29 51% 40%) 100%);
background-clip: border-box, text;
-webkit-background-clip: border-box, text;
-webkit-text-fill-color: transparent;
color: transparent;
-webkit-text-stroke: 0.75px hsl(25 77% 16%);
}
.text-effect::before,
.text-effect::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 16.8px;
background: hsl(33 63% 58%);
clip-path: polygon(0px 8.4px, 8.4px 0px, 15.1px 6.7px, calc(100% - 15.1px) 6.7px, calc(100% - 8.4px) 0px, 100% 8.4px, calc(100% - 8.4px) 16.8px, calc(100% - 15.1px) 10.1px, 15.1px 10.1px, 8.4px 16.8px);
pointer-events: none;
}
.text-effect::before {
top: 4px;
}
.text-effect::after {
bottom: 4px;
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Retro & Themed
- Type
- Static
- Browser support
- background-clip:text with a second border-box-clipped layer + clip-path polygon rules (all modern, -webkit- prefixed)
- Capabilities
- pure