Harag Band
Underline & Decoration · Static · pure CSS
An Ethiopian-manuscript harag border: two data-URI SVG interlace bands of dark-outlined woven cells cycling through a curated gold, cinnabar, verdant and lapis palette frame the text above and below, capped at each end by mirrored palmette flourishes — while the first word is rubricated in scribe's-red ink and the rest stays inked black. An illuminated-manuscript border system, distinct from a hairline over-bar or geometric deco rules.
How it works
Harag Band is a static underline & decoration text effect rendered entirely in CSS. It relies on an inline SVG <defs> block (filters, gradients or clip-paths), which the HTML export carries alongside the CSS.
Controls
Harag Band exposes 4 dedicated controls — Band Thickness, Palette, Rubrication and Hand-Ink Wobble — 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
/* Harag Band — made with TEXT-FX · https://text-fx.app
* HTML: requires the inline <svg> filter defs — see the HTML export.
* Font: 'Syne', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Syne', sans-serif;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
}
.text-effect {
position: relative;
display: inline-block;
white-space: pre;
padding: 0.645em 0;
text-align: center;
}
.text-effect .fx-band {
position: absolute;
left: 0;
right: 0;
height: 0.43em;
background-color: hsl(42 48% 89%);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22346%22%20height%3D%22100%22%20viewBox%3D%220%200%20346%20100%22%3E%3Crect%20width%3D%22346%22%20height%3D%22100%22%20fill%3D%22hsl(42%2048%25%2089%25)%22%2F%3E%3Cpolygon%20points%3D%2250%2C5%20100%2C37%2050%2C69%200%2C37%22%20fill%3D%22hsl(48%2086%25%2058%25)%22%20stroke%3D%22hsl(18%2044%25%2013%25)%22%20stroke-width%3D%226%22%2F%3E%3Cpolygon%20points%3D%22132%2C31%20182%2C63%20132%2C95%2082%2C63%22%20fill%3D%22hsl(3%2072%25%2049%25)%22%20stroke%3D%22hsl(18%2044%25%2013%25)%22%20stroke-width%3D%226%22%2F%3E%3Cpolygon%20points%3D%22214%2C5%20264%2C37%20214%2C69%20164%2C37%22%20fill%3D%22hsl(140%2042%25%2035%25)%22%20stroke%3D%22hsl(18%2044%25%2013%25)%22%20stroke-width%3D%226%22%2F%3E%3Cpolygon%20points%3D%22296%2C31%20346%2C63%20296%2C95%20246%2C63%22%20fill%3D%22hsl(210%2050%25%2041%25)%22%20stroke%3D%22hsl(18%2044%25%2013%25)%22%20stroke-width%3D%226%22%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat-x;
background-position: 0 0;
background-size: 1.488em 0.43em;
box-shadow: 0 0 0 1px hsl(20 40% 8% / 0.6), 0 3px 10px hsl(0 0% 0% / 0.5);
filter: url(#text-effect-wobble);
}
.text-effect .fx-band-top {
top: 0;
}
.text-effect .fx-band-bottom {
bottom: 0;
}
.text-effect .fx-band::before,
.text-effect .fx-band::after {
content: "";
position: absolute;
top: 0;
width: min(0.366em, 32%);
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2285%22%20height%3D%22100%22%20viewBox%3D%220%200%2085%20100%22%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2250%22%20rx%3D%2234%22%20ry%3D%2217%22%20fill%3D%22hsl(48%2086%25%2058%25)%22%20stroke%3D%22hsl(18%2044%25%2013%25)%22%20stroke-width%3D%224.5%22%20transform%3D%22rotate(-26%2010%2050)%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2250%22%20rx%3D%2234%22%20ry%3D%2217%22%20fill%3D%22hsl(48%2086%25%2058%25)%22%20stroke%3D%22hsl(18%2044%25%2013%25)%22%20stroke-width%3D%224.5%22%20transform%3D%22rotate(0%2010%2050)%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2250%22%20rx%3D%2234%22%20ry%3D%2217%22%20fill%3D%22hsl(48%2086%25%2058%25)%22%20stroke%3D%22hsl(18%2044%25%2013%25)%22%20stroke-width%3D%224.5%22%20transform%3D%22rotate(26%2010%2050)%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2250%22%20r%3D%229%22%20fill%3D%22hsl(18%2044%25%2013%25)%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.text-effect .fx-band::before {
left: 0;
}
.text-effect .fx-band::after {
right: 0;
transform: scaleX(-1);
}
.text-effect .fx-text {
display: inline-block;
line-height: 1.2;
color: hsl(38 24% 88%);
}
.text-effect .fx-rubric {
color: hsl(38 24% 88%);
}
HTML
This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).
<!-- Made with TEXT-FX · https://text-fx.app -->
<style>
.text-effect {
font-family: 'Syne', sans-serif;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
}
.text-effect {
position: relative;
display: inline-block;
white-space: pre;
padding: 0.645em 0;
text-align: center;
}
.text-effect .fx-band {
position: absolute;
left: 0;
right: 0;
height: 0.43em;
background-color: hsl(42 48% 89%);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22346%22%20height%3D%22100%22%20viewBox%3D%220%200%20346%20100%22%3E%3Crect%20width%3D%22346%22%20height%3D%22100%22%20fill%3D%22hsl(42%2048%25%2089%25)%22%2F%3E%3Cpolygon%20points%3D%2250%2C5%20100%2C37%2050%2C69%200%2C37%22%20fill%3D%22hsl(48%2086%25%2058%25)%22%20stroke%3D%22hsl(18%2044%25%2013%25)%22%20stroke-width%3D%226%22%2F%3E%3Cpolygon%20points%3D%22132%2C31%20182%2C63%20132%2C95%2082%2C63%22%20fill%3D%22hsl(3%2072%25%2049%25)%22%20stroke%3D%22hsl(18%2044%25%2013%25)%22%20stroke-width%3D%226%22%2F%3E%3Cpolygon%20points%3D%22214%2C5%20264%2C37%20214%2C69%20164%2C37%22%20fill%3D%22hsl(140%2042%25%2035%25)%22%20stroke%3D%22hsl(18%2044%25%2013%25)%22%20stroke-width%3D%226%22%2F%3E%3Cpolygon%20points%3D%22296%2C31%20346%2C63%20296%2C95%20246%2C63%22%20fill%3D%22hsl(210%2050%25%2041%25)%22%20stroke%3D%22hsl(18%2044%25%2013%25)%22%20stroke-width%3D%226%22%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat-x;
background-position: 0 0;
background-size: 1.488em 0.43em;
box-shadow: 0 0 0 1px hsl(20 40% 8% / 0.6), 0 3px 10px hsl(0 0% 0% / 0.5);
filter: url(#text-effect-wobble);
}
.text-effect .fx-band-top {
top: 0;
}
.text-effect .fx-band-bottom {
bottom: 0;
}
.text-effect .fx-band::before,
.text-effect .fx-band::after {
content: "";
position: absolute;
top: 0;
width: min(0.366em, 32%);
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2285%22%20height%3D%22100%22%20viewBox%3D%220%200%2085%20100%22%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2250%22%20rx%3D%2234%22%20ry%3D%2217%22%20fill%3D%22hsl(48%2086%25%2058%25)%22%20stroke%3D%22hsl(18%2044%25%2013%25)%22%20stroke-width%3D%224.5%22%20transform%3D%22rotate(-26%2010%2050)%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2250%22%20rx%3D%2234%22%20ry%3D%2217%22%20fill%3D%22hsl(48%2086%25%2058%25)%22%20stroke%3D%22hsl(18%2044%25%2013%25)%22%20stroke-width%3D%224.5%22%20transform%3D%22rotate(0%2010%2050)%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2250%22%20rx%3D%2234%22%20ry%3D%2217%22%20fill%3D%22hsl(48%2086%25%2058%25)%22%20stroke%3D%22hsl(18%2044%25%2013%25)%22%20stroke-width%3D%224.5%22%20transform%3D%22rotate(26%2010%2050)%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2250%22%20r%3D%229%22%20fill%3D%22hsl(18%2044%25%2013%25)%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.text-effect .fx-band::before {
left: 0;
}
.text-effect .fx-band::after {
right: 0;
transform: scaleX(-1);
}
.text-effect .fx-text {
display: inline-block;
line-height: 1.2;
color: hsl(38 24% 88%);
}
.text-effect .fx-rubric {
color: hsl(38 24% 88%);
}
</style>
<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<filter id="text-effect-wobble" x="-6%" y="-220%" width="112%" height="540%">
<feTurbulence type="fractalNoise" baseFrequency="0.05 0.32" numOctaves="2" seed="7" result="n"/>
<feDisplacementMap in="SourceGraphic" in2="n" scale="1.4" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs></svg>
<div class="text-effect"><div class="fx-band fx-band-top"></div><div class="fx-text"><span class="fx-rubric">Your</span> text</div><div class="fx-band fx-band-bottom"></div></div>
- Category
- Underline & Decoration
- Type
- Static
- Browser support
- Two repeating data-URI SVG strapwork bands with mirrored palmette end-caps (::before/::after), first word rubricated red
- Capabilities
- svgDefs