Kintsugi

How it works

Kintsugi is a static fill & texture 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

Kintsugi exposes 4 dedicated controls — Crack Density, Ceramic Tone, Gold Warmth and Seam Glow — 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

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

.text-effect {
  font-family: 'Bungee', cursive;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.text-effect {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.text-effect .fx-ceramic {
  position: relative;
  display: inline-block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-color: hsl(224 42% 44%);
  background-image: linear-gradient(176deg, hsl(0 0% 100% / 0.4) 0%, hsl(0 0% 100% / 0) 20%), linear-gradient(178deg, hsl(224 42% 56%) 0%, hsl(224 42% 44%) 46%, hsl(224 42% 33%) 100%);
  filter: drop-shadow(0 2px 2.5px hsl(220 25% 6% / 0.5));
}
.text-effect .fx-gold {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(100deg, hsl(49.7 85.3% 85%) 0%, hsl(43.7 85.3% 66%) 26%, hsl(35.7 85.3% 47%) 50%, hsl(44.7 85.3% 70%) 74%, hsl(39.7 85.3% 57%) 100%);
  filter: url(#text-effect-seam) drop-shadow(0 -0.5px 0 hsl(50.7 88% 90% / 0.85)) drop-shadow(0 0.6px 0.4px hsl(25.700000000000003 55% 18% / 0.72)) drop-shadow(0 0 2.37px hsl(41.7 92% 60% / 0.62));
  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: 'Bungee', cursive;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.text-effect {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.text-effect .fx-ceramic {
  position: relative;
  display: inline-block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-color: hsl(224 42% 44%);
  background-image: linear-gradient(176deg, hsl(0 0% 100% / 0.4) 0%, hsl(0 0% 100% / 0) 20%), linear-gradient(178deg, hsl(224 42% 56%) 0%, hsl(224 42% 44%) 46%, hsl(224 42% 33%) 100%);
  filter: drop-shadow(0 2px 2.5px hsl(220 25% 6% / 0.5));
}
.text-effect .fx-gold {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(100deg, hsl(49.7 85.3% 85%) 0%, hsl(43.7 85.3% 66%) 26%, hsl(35.7 85.3% 47%) 50%, hsl(44.7 85.3% 70%) 74%, hsl(39.7 85.3% 57%) 100%);
  filter: url(#text-effect-seam) drop-shadow(0 -0.5px 0 hsl(50.7 88% 90% / 0.85)) drop-shadow(0 0.6px 0.4px hsl(25.700000000000003 55% 18% / 0.72)) drop-shadow(0 0 2.37px hsl(41.7 92% 60% / 0.62));
  pointer-events: none;
}
</style>

<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<filter id="text-effect-seam" x="-25%" y="-25%" width="150%" height="150%" color-interpolation-filters="sRGB">
  <feTurbulence type="fractalNoise" baseFrequency="0.0286 0.0315" numOctaves="2" seed="7" 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  1 0 0 0 0" result="field"/>
  <feComponentTransfer in="field" result="phase">
    <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"/>
  </feComponentTransfer>
  <feMorphology in="phase" operator="dilate" radius="0.63" result="grow"/>
  <feMorphology in="phase" operator="erode" radius="0.63" result="shrink"/>
  <feComposite in="grow" in2="shrink" operator="arithmetic" k1="0" k2="1" k3="-1" k4="0" result="seamSoft"/>
  <feColorMatrix in="seamSoft" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 9 0" result="seamMask"/>
  <feComposite in="SourceGraphic" in2="seamMask" operator="in"/>
</filter>
</defs></svg>

<div class="text-effect"><span class="fx-ceramic">Your text</span><span class="fx-gold" aria-hidden="true">Your text</span></div>

Related Fill & Texture effects

• Image Fill
• Starfield
• Stripe Fill
• Halftone Dots
• Camouflage