Tughra
Outline & Stroke · Static · pure CSS
An Ottoman imperial-cipher badge: the word rides an italic hand on a solid warm sere plate, while a fine gold, ink or vermilion inline-SVG ornament sweeps off its left edge — two nested tilted oval loops (the beyze) with three parallel vertical shafts (the tuğ) rising above, each capped with a small curled flag. The ornament pins to the plate's edge so it hugs text of any length, and every dimension scales with the font size.
How it works
Tughra is a static outline & stroke 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
Tughra exposes 4 dedicated controls — Ornament, Stroke Weight, Loop Size and Shaft Height — 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
/* Tughra — made with TEXT-FX · https://text-fx.app
* HTML: requires the inline <svg> filter defs — see the HTML export.
* Font: 'Anton', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Anton', sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-transform: none;
}
.text-effect {
position: relative;
display: inline-block;
white-space: nowrap;
font-style: italic;
line-height: 1.12;
color: hsl(28 42% 15%);
background: hsl(41 30% 90%);
padding: 0.16em 0.5em 0.12em 0.56em;
border-radius: 0.05em;
border: 0.02em solid hsl(38 22% 79% / 0.9);
border-bottom: 0.162em solid hsl(43 88% 60%);
box-shadow: 0 0.05em 0.16em rgba(0,0,0,0.42);
}
.text-effect .tughra-orn {
position: absolute;
left: -1.103em;
bottom: -0.061em;
width: 1.781em;
height: 1.75em;
overflow: visible;
pointer-events: none;
}
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: 'Anton', sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-transform: none;
}
.text-effect {
position: relative;
display: inline-block;
white-space: nowrap;
font-style: italic;
line-height: 1.12;
color: hsl(28 42% 15%);
background: hsl(41 30% 90%);
padding: 0.16em 0.5em 0.12em 0.56em;
border-radius: 0.05em;
border: 0.02em solid hsl(38 22% 79% / 0.9);
border-bottom: 0.162em solid hsl(43 88% 60%);
box-shadow: 0 0.05em 0.16em rgba(0,0,0,0.42);
}
.text-effect .tughra-orn {
position: absolute;
left: -1.103em;
bottom: -0.061em;
width: 1.781em;
height: 1.75em;
overflow: visible;
pointer-events: none;
}
</style>
<div class="text-effect">Your text<svg class="tughra-orn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178.1 175" preserveAspectRatio="none" aria-hidden="true"><g fill="none" stroke="hsl(43 88% 60%)" stroke-width="8.5" stroke-linecap="round" stroke-linejoin="round"><line x1="38" y1="173" x2="178.1" y2="173" stroke-width="16.2"></line><ellipse cx="78.3" cy="112" rx="64" ry="38.4" transform="rotate(-20 78.3 112)"></ellipse><ellipse cx="78.3" cy="112" rx="38.4" ry="22.3" transform="rotate(-20 78.3 112)"></ellipse><line x1="118.6" y1="173" x2="118.6" y2="19"></line><line x1="139.1" y1="173" x2="139.1" y2="19"></line><line x1="159.6" y1="173" x2="159.6" y2="19"></line><path d="M 118.6 19 Q 112.84 5.32 99.16 17.56"></path><path d="M 139.1 19 Q 133.34 5.32 119.66 17.56"></path><path d="M 159.6 19 Q 153.84 5.32 140.16 17.56"></path></g></svg></div>
- Category
- Outline & Stroke
- Type
- Static
- Browser support
- Inline SVG ornament sized in em units (all modern browsers)
- Capabilities
- svgDefs