Blueprint
Retro & Themed · Static · pure CSS
Hollow hairline-stroked letterforms sit as line-art on a deep cyanotype-blue drawing sheet, complete with a faint graph-paper grid, corner registration marks, and a dashed dimension line under the baseline. On a light stage the process inverts to navy ink on pale drafting paper, echoing the classic diazo whiteprint.
How it works
Blueprint 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
Blueprint exposes 3 dedicated controls — Line Hue, Grid Density and Dimension Line — 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
/* Blueprint — 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: 0px;
text-transform: none;
}
.text-effect {
position: relative;
display: inline-block;
padding: 26px 40px 34px;
background: repeating-linear-gradient(0deg, hsl(183 30% 85% / 0.16) 0, hsl(183 30% 85% / 0.16) 1px, transparent 1px, transparent 18px),
repeating-linear-gradient(90deg, hsl(183 30% 85% / 0.16) 0, hsl(183 30% 85% / 0.16) 1px, transparent 1px, transparent 18px),
repeating-linear-gradient(90deg, hsl(183 28% 92%) 0 5px, transparent 5px 10px) 40px calc(100% - 14px) / calc(100% - 80px) 1px no-repeat,
linear-gradient(hsl(183 28% 92%), hsl(183 28% 92%)) 40px calc(100% - 19px) / 1px 10px no-repeat,
linear-gradient(hsl(183 28% 92%), hsl(183 28% 92%)) calc(100% - 40px) calc(100% - 19px) / 1px 10px no-repeat;
background-color: hsl(212 60% 20%);
box-shadow: inset 0 0 0 1px hsl(183 28% 80% / 0.4), 0 10px 26px rgba(0, 0, 0, 0.32);
color: transparent;
-webkit-text-stroke: 1.25px hsl(183 28% 92%);
line-height: 1.15;
}
.text-effect::before,
.text-effect::after {
content: "";
position: absolute;
width: 13px;
height: 13px;
border: 1px solid hsl(183 28% 92%);
opacity: 0.55;
}
.text-effect::before {
top: 8px;
left: 8px;
border-right: none;
border-bottom: none;
}
.text-effect::after {
bottom: 8px;
right: 8px;
border-left: none;
border-top: none;
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Retro & Themed
- Type
- Static
- Browser support
- -webkit-text-stroke line-art over layered CSS gradients (all modern, prefixed)
- Capabilities
- pure