Safety Stencil
Retro & Themed · Static · pure CSS
Bold flat spray ink with literal die-cut bridge gaps — thin transparent bands masked straight through every glyph, exactly the bridges a real letter stencil needs to hold its shape together. Wrap it in the yellow-and-black hazard-stripe frame for the full military-crate warning-label look, crisp and geometric with zero grunge.
How it works
Safety Stencil 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
Safety Stencil exposes 3 dedicated controls — Ink, Bridge Gaps and Hazard Frame — 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
/* Safety Stencil — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Syne', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Syne', sans-serif;
font-weight: 700;
letter-spacing: 4px;
text-transform: none;
}
.text-effect {
display: inline-block;
padding: 0.45em 0.65em;
border-style: solid;
border-width: 8px;
border-color: transparent;
border-image-source: repeating-linear-gradient(45deg, hsl(48 96% 50%) 0px 10px, hsl(0 0% 8%) 10px 20px);
border-image-slice: 8;
border-image-repeat: round;
}
.text-effect > span {
display: inline-block;
color: hsl(74 28% 42%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 21%, transparent 21%, transparent 29%, black 29%, black 46%, transparent 46%, transparent 54%, black 54%, black 71%, transparent 71%, transparent 79%, black 79%, black 100%);
mask-image: linear-gradient(to bottom, black 0%, black 21%, transparent 21%, transparent 29%, black 29%, black 46%, transparent 46%, transparent 54%, black 54%, black 71%, transparent 71%, transparent 79%, black 79%, black 100%);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Retro & Themed
- Type
- Static
- Browser support
- -webkit-mask-image bridge cuts + border-image hazard stripes (all modern browsers)
- Capabilities
- pure