Safety Stencil
Retro & Themed · Static · pure CSS
Bold flat spray ink set in a genuine die-cut stencil typeface, so every glyph carries the real bridge gaps a letter stencil needs to hold its islands together — the counter of an O, the crossbar of an A — as clean per-letter breaks, not bands sliced across the word. 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 2 dedicated controls — Ink 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: 'Saira Stencil One', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Saira Stencil One', sans-serif;
font-weight: 700;
letter-spacing: 4px;
text-transform: none;
}
.text-effect {
display: inline-block;
padding: 0.45em 0.65em;
color: hsl(74 28% 42%);
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;
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Retro & Themed
- Type
- Static
- Browser support
- web-loaded stencil font + border-image hazard stripes (all modern browsers)
- Capabilities
- pure