Blackletter

How it works

Blackletter is a static retro & themed 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

Blackletter exposes 4 dedicated controls — Versal Ink, Vellum Tone, Foxing and Ink Weight — 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

/* Blackletter — made with TEXT-FX · https://text-fx.app
 * HTML: requires the inline <svg> filter defs — see the HTML export.
 * Font: 'UnifrakturMaguntia', cursive (load from Google Fonts).
 */

.text-effect {
  font-family: 'UnifrakturMaguntia', cursive;
  font-weight: 900;
  letter-spacing: -1px;
  text-transform: none;
}

.text-effect {
  display: inline-block;
  padding: 0.6em 0.9em;
  line-height: 1.4;
  border-radius: 0.1em;
  background: radial-gradient(circle at 14% 28%, hsl(24 46% 34% / 0.18) 0%, transparent 13%),
    radial-gradient(circle at 80% 20%, hsl(24 46% 34% / 0.18) 0%, transparent 10%),
    radial-gradient(circle at 58% 84%, hsl(24 46% 34% / 0.18) 0%, transparent 14%),
    radial-gradient(circle at 92% 68%, hsl(24 46% 34% / 0.18) 0%, transparent 9%),
    linear-gradient(160deg, hsl(26 36% 42%) 0%, hsl(20 38% 28%) 100%);
  box-shadow:
    inset 0 0 0 1px hsl(22 30% 18%),
    inset 0 0.05em 0 hsl(0 0% 100% / 0.07),
    inset 0 -0.06em 0.12em hsl(0 0% 0% / 0.35),
    0 0.15em 0.4em hsl(0 0% 0% / 0.5);
  color: hsl(30 14% 11%);
  text-shadow: 0 0.011em 0.016em hsl(20 25% 4% / 0.28);
  -webkit-text-stroke: 0.012em hsl(30 14% 11%);
  font-weight: 400;
  font-synthesis: none;
  filter: url(#text-effect-grain);
}
.text-effect::first-letter {
  font-size: 1.65em;
  color: hsl(220 66% 60%);
  -webkit-text-stroke: 0.01em hsl(30 14% 11%);
  text-shadow: 0 0.011em 0.016em hsl(20 25% 4% / 0.28);
}

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: 'UnifrakturMaguntia', cursive;
  font-weight: 900;
  letter-spacing: -1px;
  text-transform: none;
}

.text-effect {
  display: inline-block;
  padding: 0.6em 0.9em;
  line-height: 1.4;
  border-radius: 0.1em;
  background: radial-gradient(circle at 14% 28%, hsl(24 46% 34% / 0.18) 0%, transparent 13%),
    radial-gradient(circle at 80% 20%, hsl(24 46% 34% / 0.18) 0%, transparent 10%),
    radial-gradient(circle at 58% 84%, hsl(24 46% 34% / 0.18) 0%, transparent 14%),
    radial-gradient(circle at 92% 68%, hsl(24 46% 34% / 0.18) 0%, transparent 9%),
    linear-gradient(160deg, hsl(26 36% 42%) 0%, hsl(20 38% 28%) 100%);
  box-shadow:
    inset 0 0 0 1px hsl(22 30% 18%),
    inset 0 0.05em 0 hsl(0 0% 100% / 0.07),
    inset 0 -0.06em 0.12em hsl(0 0% 0% / 0.35),
    0 0.15em 0.4em hsl(0 0% 0% / 0.5);
  color: hsl(30 14% 11%);
  text-shadow: 0 0.011em 0.016em hsl(20 25% 4% / 0.28);
  -webkit-text-stroke: 0.012em hsl(30 14% 11%);
  font-weight: 400;
  font-synthesis: none;
  filter: url(#text-effect-grain);
}
.text-effect::first-letter {
  font-size: 1.65em;
  color: hsl(220 66% 60%);
  -webkit-text-stroke: 0.01em hsl(30 14% 11%);
  text-shadow: 0 0.011em 0.016em hsl(20 25% 4% / 0.28);
}
</style>

<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<filter id="text-effect-grain" x="-25%" y="-30%" width="150%" height="165%">
  <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed="4" stitchTiles="stitch" result="noise"/>
  <feColorMatrix in="noise" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0" result="grain"/>
  <feComposite in="grain" in2="SourceGraphic" operator="in" result="boxGrain"/>
  <feMerge>
    <feMergeNode in="SourceGraphic"/>
    <feMergeNode in="boxGrain"/>
  </feMerge>
</filter>
</defs></svg>

<div class="text-effect">Your text</div>

Related Retro & Themed effects

• Vaporwave
• Distress Stamp
• Chalkboard
• Riso Misregister
• Pixel / 8-bit