Gold Mosaic

Metallic & Holographic · Static · pure CSS

Byzantine gold-glass tesserae poured through the letters: a data-URI SVG tile lays rows of small, slightly-rotated square glass tiles, each with its own warm-gold gradient and a hair of dark plaster grout between rows, with a scattered few cells swapped to lapis and porphyry accents. An optional slow twinkle cross-fades two out-of-phase glint sets so individual tesserae catch the light — discrete tilted glass tiles set in mortar, not a smooth poured sheen.

Open in the generator →All effects
Gold Mosaic

How it works

Gold Mosaic is a static metallic & holographic text effect rendered entirely in CSS. A data-text attribute mirrors the word into ::before/::after layers, so copy that attribute together with the CSS.

Controls

Gold Mosaic exposes 4 dedicated controls — Tessera Size, Accent Density, Gold Warmth and Twinkle — 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

/* Gold Mosaic — made with TEXT-FX · https://text-fx.app
 * HTML: the element needs a data-text attribute equal to its text.
 * Font: 'Bricolage Grotesque', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: none;
}

.text-effect {
  position: relative;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22138%22%20height%3D%22150.8%22%20viewBox%3D%220%200%20138%20150.8%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g0%22%20x1%3D%220.787%22%20y1%3D%220.09%22%20x2%3D%220.213%22%20y2%3D%220.91%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(47.6%2C83%25%2C69%25)%22%2F%3E%3Cstop%20offset%3D%220.4%22%20stop-color%3D%22hsl(42.6%2C83%25%2C52%25)%22%2F%3E%3Cstop%20offset%3D%220.72%22%20stop-color%3D%22hsl(40.6%2C79%25%2C39%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(34.6%2C75%25%2C25%25)%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22g1%22%20x1%3D%220.953%22%20y1%3D%220.711%22%20x2%3D%220.047%22%20y2%3D%220.289%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(47.6%2C83%25%2C74%25)%22%2F%3E%3Cstop%20offset%3D%220.4%22%20stop-color%3D%22hsl(42.6%2C83%25%2C57%25)%22%2F%3E%3Cstop%20offset%3D%220.72%22%20stop-color%3D%22hsl(40.6%2C79%25%2C44%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(34.6%2C75%25%2C30%25)%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22g2%22%20x1%3D%220.289%22%20y1%3D%220.047%22%20x2%3D%220.711%22%20y2%3D%220.953%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(47.6%2C83%25%2C78%25)%22%2F%3E%3Cstop%20offset%3D%220.4%22%20stop-color%3D%22hsl(42.6%2C83%25%2C61%25)%22%2F%3E%3Cstop%20offset%3D%220.72%22%20stop-color%3D%22hsl(40.6%2C79%25%2C48%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(34.6%2C75%25%2C34%25)%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22g3%22%20x1%3D%220.146%22%20y1%3D%220.854%22%20x2%3D%220.854%22%20y2%3D%220.146%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(47.6%2C83%25%2C83%25)%22%2F%3E%3Cstop%20offset%3D%220.4%22%20stop-color%3D%22hsl(42.6%2C83%25%2C66%25)%22%2F%3E%3Cstop%20offset%3D%220.72%22%20stop-color%3D%22hsl(40.6%2C79%25%2C53%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(34.6%2C75%25%2C39%25)%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22g4%22%20x1%3D%220.97%22%20y1%3D%220.329%22%20x2%3D%220.03%22%20y2%3D%220.671%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(47.6%2C83%25%2C88%25)%22%2F%3E%3Cstop%20offset%3D%220.4%22%20stop-color%3D%22hsl(42.6%2C83%25%2C71%25)%22%2F%3E%3Cstop%20offset%3D%220.72%22%20stop-color%3D%22hsl(40.6%2C79%25%2C58%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(34.6%2C75%25%2C44%25)%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22g5%22%20x1%3D%220.047%22%20y1%3D%220.289%22%20x2%3D%220.953%22%20y2%3D%220.711%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(47.6%2C83%25%2C92%25)%22%2F%3E%3Cstop%20offset%3D%220.4%22%20stop-color%3D%22hsl(42.6%2C83%25%2C75%25)%22%2F%3E%3Cstop%20offset%3D%220.72%22%20stop-color%3D%22hsl(40.6%2C79%25%2C62%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(34.6%2C75%25%2C48%25)%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22lp%22%20x1%3D%220.821%22%20y1%3D%220.117%22%20x2%3D%220.179%22%20y2%3D%220.883%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(214%2C68%25%2C60%25)%22%2F%3E%3Cstop%20offset%3D%220.42%22%20stop-color%3D%22hsl(220%2C74%25%2C46%25)%22%2F%3E%3Cstop%20offset%3D%220.74%22%20stop-color%3D%22hsl(226%2C78%25%2C34%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(232%2C72%25%2C22%25)%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22pf%22%20x1%3D%220.821%22%20y1%3D%220.117%22%20x2%3D%220.179%22%20y2%3D%220.883%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(346%2C44%25%2C48%25)%22%2F%3E%3Cstop%20offset%3D%220.42%22%20stop-color%3D%22hsl(345%2C50%25%2C38%25)%22%2F%3E%3Cstop%20offset%3D%220.74%22%20stop-color%3D%22hsl(348%2C54%25%2C29%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(351%2C56%25%2C20%25)%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22dt%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.09%22%20numOctaves%3D%222%22%20seed%3D%2211%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%22138%22%20height%3D%22150.8%22%20fill%3D%22hsl(32.6%2C26%25%2C15%25)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g1)%22%20transform%3D%22rotate(5.41%208.63%209.43)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(2.53%2025.88%209.43)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(-2.57%2043.13%209.43)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(0.94%2060.38%209.43)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(1.78%2077.63%209.43)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(-0.26%2094.88%209.43)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(-4.87%20112.13%209.43)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(-4.53%20129.38%209.43)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(-4.66%208.63%2028.28)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(-2.87%2025.88%2028.28)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(-1.33%2043.13%2028.28)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(1.01%2060.38%2028.28)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(0.77%2077.63%2028.28)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(0.44%2094.88%2028.28)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(2.4%20112.13%2028.28)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(-0.44%20129.38%2028.28)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23pf)%22%20transform%3D%22rotate(5.78%208.63%2047.13)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(0.97%2025.88%2047.13)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(-1.97%2043.13%2047.13)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(0.17%2060.38%2047.13)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(-5.48%2077.63%2047.13)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(2.93%2094.88%2047.13)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(1.97%20112.13%2047.13)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(-3.22%20129.38%2047.13)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(0.86%208.63%2065.98)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(3.62%2025.88%2065.98)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(-1.08%2043.13%2065.98)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g0)%22%20transform%3D%22rotate(0.34%2060.38%2065.98)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(-3.6%2077.63%2065.98)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(2.21%2094.88%2065.98)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g0)%22%20transform%3D%22rotate(4.38%20112.13%2065.98)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23pf)%22%20transform%3D%22rotate(-1.87%20129.38%2065.98)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23lp)%22%20transform%3D%22rotate(2.34%208.63%2084.83)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(2.12%2025.88%2084.83)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(1.88%2043.13%2084.83)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(-5.58%2060.38%2084.83)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(4.79%2077.63%2084.83)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g1)%22%20transform%3D%22rotate(-5.18%2094.88%2084.83)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(-2.68%20112.13%2084.83)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(5.76%20129.38%2084.83)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(-4.52%208.63%20103.68)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(-2.59%2025.88%20103.68)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(-3.33%2043.13%20103.68)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(3.15%2060.38%20103.68)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(-4.57%2077.63%20103.68)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(-5.35%2094.88%20103.68)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g0)%22%20transform%3D%22rotate(-0.66%20112.13%20103.68)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(5.13%20129.38%20103.68)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(2.13%208.63%20122.53)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(4.91%2025.88%20122.53)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(-2.15%2043.13%20122.53)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g0)%22%20transform%3D%22rotate(2.12%2060.38%20122.53)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g1)%22%20transform%3D%22rotate(-3.44%2077.63%20122.53)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g1)%22%20transform%3D%22rotate(0.4%2094.88%20122.53)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(1.6%20112.13%20122.53)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(-1.09%20129.38%20122.53)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(2.67%208.63%20141.38)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(0.39%2025.88%20141.38)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g0)%22%20transform%3D%22rotate(-2.54%2043.13%20141.38)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g0)%22%20transform%3D%22rotate(-0.76%2060.38%20141.38)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g0)%22%20transform%3D%22rotate(-4.2%2077.63%20141.38)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(2.37%2094.88%20141.38)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(-2.19%20112.13%20141.38)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(0.46%20129.38%20141.38)%22%2F%3E%3Crect%20width%3D%22138%22%20height%3D%22150.8%22%20filter%3D%22url(%23dt)%22%20opacity%3D%220.1%22%20style%3D%22mix-blend-mode%3Asoft-light%22%2F%3E%3C%2Fsvg%3E");
  background-size: 138px 150.8px;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0.4px hsl(40.6,45%,40%);
  filter: drop-shadow(0 2px 3px hsla(28.6,40%,6%,0.65));
}
.text-effect::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: 138px 150.8px;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0 transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22138%22%20height%3D%22150.8%22%20viewBox%3D%220%200%20138%20150.8%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22gl%22%20cx%3D%220.36%22%20cy%3D%220.32%22%20r%3D%220.85%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(48.6%2C60%25%2C93%25)%22%2F%3E%3Cstop%20offset%3D%220.45%22%20stop-color%3D%22hsl(43.6%2C83%25%2C74%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(40.6%2C83%25%2C58%25)%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D%2235.63%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-2.57%2043.13%209.43)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-4.87%20112.13%209.43)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(1.01%2060.38%2028.28)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(5.78%208.63%2047.13)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(0.97%2025.88%2047.13)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-1.97%2043.13%2047.13)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-3.22%20129.38%2047.13)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(0.86%208.63%2065.98)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-3.6%2077.63%2065.98)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(2.21%2094.88%2065.98)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(4.38%20112.13%2065.98)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-5.35%2094.88%20103.68)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-0.66%20112.13%20103.68)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(4.91%2025.88%20122.53)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-1.09%20129.38%20122.53)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(0.39%2025.88%20141.38)%22%2F%3E%3C%2Fsvg%3E");
  animation: text-effect-twinkle 6s ease-in-out infinite;
}
.text-effect::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: 138px 150.8px;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0 transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22138%22%20height%3D%22150.8%22%20viewBox%3D%220%200%20138%20150.8%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22gl%22%20cx%3D%220.36%22%20cy%3D%220.32%22%20r%3D%220.85%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(48.6%2C60%25%2C93%25)%22%2F%3E%3Cstop%20offset%3D%220.45%22%20stop-color%3D%22hsl(43.6%2C83%25%2C74%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(40.6%2C83%25%2C58%25)%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D%221.13%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(5.41%208.63%209.43)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-4.66%208.63%2028.28)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(2.93%2094.88%2047.13)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(1.88%2043.13%2084.83)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-3.33%2043.13%20103.68)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-3.44%2077.63%20122.53)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(0.4%2094.88%20122.53)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-2.54%2043.13%20141.38)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-4.2%2077.63%20141.38)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(0.46%20129.38%20141.38)%22%2F%3E%3C%2Fsvg%3E");
  animation: text-effect-twinkle 6s ease-in-out infinite;
  animation-delay: -3s;
}

@keyframes text-effect-twinkle {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.75; }
}

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: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: none;
}

.text-effect {
  position: relative;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22138%22%20height%3D%22150.8%22%20viewBox%3D%220%200%20138%20150.8%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g0%22%20x1%3D%220.787%22%20y1%3D%220.09%22%20x2%3D%220.213%22%20y2%3D%220.91%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(47.6%2C83%25%2C69%25)%22%2F%3E%3Cstop%20offset%3D%220.4%22%20stop-color%3D%22hsl(42.6%2C83%25%2C52%25)%22%2F%3E%3Cstop%20offset%3D%220.72%22%20stop-color%3D%22hsl(40.6%2C79%25%2C39%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(34.6%2C75%25%2C25%25)%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22g1%22%20x1%3D%220.953%22%20y1%3D%220.711%22%20x2%3D%220.047%22%20y2%3D%220.289%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(47.6%2C83%25%2C74%25)%22%2F%3E%3Cstop%20offset%3D%220.4%22%20stop-color%3D%22hsl(42.6%2C83%25%2C57%25)%22%2F%3E%3Cstop%20offset%3D%220.72%22%20stop-color%3D%22hsl(40.6%2C79%25%2C44%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(34.6%2C75%25%2C30%25)%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22g2%22%20x1%3D%220.289%22%20y1%3D%220.047%22%20x2%3D%220.711%22%20y2%3D%220.953%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(47.6%2C83%25%2C78%25)%22%2F%3E%3Cstop%20offset%3D%220.4%22%20stop-color%3D%22hsl(42.6%2C83%25%2C61%25)%22%2F%3E%3Cstop%20offset%3D%220.72%22%20stop-color%3D%22hsl(40.6%2C79%25%2C48%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(34.6%2C75%25%2C34%25)%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22g3%22%20x1%3D%220.146%22%20y1%3D%220.854%22%20x2%3D%220.854%22%20y2%3D%220.146%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(47.6%2C83%25%2C83%25)%22%2F%3E%3Cstop%20offset%3D%220.4%22%20stop-color%3D%22hsl(42.6%2C83%25%2C66%25)%22%2F%3E%3Cstop%20offset%3D%220.72%22%20stop-color%3D%22hsl(40.6%2C79%25%2C53%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(34.6%2C75%25%2C39%25)%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22g4%22%20x1%3D%220.97%22%20y1%3D%220.329%22%20x2%3D%220.03%22%20y2%3D%220.671%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(47.6%2C83%25%2C88%25)%22%2F%3E%3Cstop%20offset%3D%220.4%22%20stop-color%3D%22hsl(42.6%2C83%25%2C71%25)%22%2F%3E%3Cstop%20offset%3D%220.72%22%20stop-color%3D%22hsl(40.6%2C79%25%2C58%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(34.6%2C75%25%2C44%25)%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22g5%22%20x1%3D%220.047%22%20y1%3D%220.289%22%20x2%3D%220.953%22%20y2%3D%220.711%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(47.6%2C83%25%2C92%25)%22%2F%3E%3Cstop%20offset%3D%220.4%22%20stop-color%3D%22hsl(42.6%2C83%25%2C75%25)%22%2F%3E%3Cstop%20offset%3D%220.72%22%20stop-color%3D%22hsl(40.6%2C79%25%2C62%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(34.6%2C75%25%2C48%25)%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22lp%22%20x1%3D%220.821%22%20y1%3D%220.117%22%20x2%3D%220.179%22%20y2%3D%220.883%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(214%2C68%25%2C60%25)%22%2F%3E%3Cstop%20offset%3D%220.42%22%20stop-color%3D%22hsl(220%2C74%25%2C46%25)%22%2F%3E%3Cstop%20offset%3D%220.74%22%20stop-color%3D%22hsl(226%2C78%25%2C34%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(232%2C72%25%2C22%25)%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22pf%22%20x1%3D%220.821%22%20y1%3D%220.117%22%20x2%3D%220.179%22%20y2%3D%220.883%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(346%2C44%25%2C48%25)%22%2F%3E%3Cstop%20offset%3D%220.42%22%20stop-color%3D%22hsl(345%2C50%25%2C38%25)%22%2F%3E%3Cstop%20offset%3D%220.74%22%20stop-color%3D%22hsl(348%2C54%25%2C29%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(351%2C56%25%2C20%25)%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22dt%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.09%22%20numOctaves%3D%222%22%20seed%3D%2211%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%22138%22%20height%3D%22150.8%22%20fill%3D%22hsl(32.6%2C26%25%2C15%25)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g1)%22%20transform%3D%22rotate(5.41%208.63%209.43)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(2.53%2025.88%209.43)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(-2.57%2043.13%209.43)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(0.94%2060.38%209.43)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(1.78%2077.63%209.43)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(-0.26%2094.88%209.43)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(-4.87%20112.13%209.43)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(-4.53%20129.38%209.43)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(-4.66%208.63%2028.28)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(-2.87%2025.88%2028.28)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(-1.33%2043.13%2028.28)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(1.01%2060.38%2028.28)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(0.77%2077.63%2028.28)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(0.44%2094.88%2028.28)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(2.4%20112.13%2028.28)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(-0.44%20129.38%2028.28)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23pf)%22%20transform%3D%22rotate(5.78%208.63%2047.13)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(0.97%2025.88%2047.13)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(-1.97%2043.13%2047.13)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(0.17%2060.38%2047.13)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(-5.48%2077.63%2047.13)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(2.93%2094.88%2047.13)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(1.97%20112.13%2047.13)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(-3.22%20129.38%2047.13)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(0.86%208.63%2065.98)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(3.62%2025.88%2065.98)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(-1.08%2043.13%2065.98)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g0)%22%20transform%3D%22rotate(0.34%2060.38%2065.98)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(-3.6%2077.63%2065.98)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(2.21%2094.88%2065.98)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g0)%22%20transform%3D%22rotate(4.38%20112.13%2065.98)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23pf)%22%20transform%3D%22rotate(-1.87%20129.38%2065.98)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23lp)%22%20transform%3D%22rotate(2.34%208.63%2084.83)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(2.12%2025.88%2084.83)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(1.88%2043.13%2084.83)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(-5.58%2060.38%2084.83)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(4.79%2077.63%2084.83)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g1)%22%20transform%3D%22rotate(-5.18%2094.88%2084.83)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(-2.68%20112.13%2084.83)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(5.76%20129.38%2084.83)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(-4.52%208.63%20103.68)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(-2.59%2025.88%20103.68)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(-3.33%2043.13%20103.68)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(3.15%2060.38%20103.68)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(-4.57%2077.63%20103.68)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(-5.35%2094.88%20103.68)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g0)%22%20transform%3D%22rotate(-0.66%20112.13%20103.68)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(5.13%20129.38%20103.68)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(2.13%208.63%20122.53)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(4.91%2025.88%20122.53)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g4)%22%20transform%3D%22rotate(-2.15%2043.13%20122.53)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g0)%22%20transform%3D%22rotate(2.12%2060.38%20122.53)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g1)%22%20transform%3D%22rotate(-3.44%2077.63%20122.53)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g1)%22%20transform%3D%22rotate(0.4%2094.88%20122.53)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(1.6%20112.13%20122.53)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g3)%22%20transform%3D%22rotate(-1.09%20129.38%20122.53)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(2.67%208.63%20141.38)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(0.39%2025.88%20141.38)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g0)%22%20transform%3D%22rotate(-2.54%2043.13%20141.38)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g0)%22%20transform%3D%22rotate(-0.76%2060.38%20141.38)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g0)%22%20transform%3D%22rotate(-4.2%2077.63%20141.38)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(2.37%2094.88%20141.38)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g5)%22%20transform%3D%22rotate(-2.19%20112.13%20141.38)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23g2)%22%20transform%3D%22rotate(0.46%20129.38%20141.38)%22%2F%3E%3Crect%20width%3D%22138%22%20height%3D%22150.8%22%20filter%3D%22url(%23dt)%22%20opacity%3D%220.1%22%20style%3D%22mix-blend-mode%3Asoft-light%22%2F%3E%3C%2Fsvg%3E");
  background-size: 138px 150.8px;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0.4px hsl(40.6,45%,40%);
  filter: drop-shadow(0 2px 3px hsla(28.6,40%,6%,0.65));
}
.text-effect::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: 138px 150.8px;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0 transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22138%22%20height%3D%22150.8%22%20viewBox%3D%220%200%20138%20150.8%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22gl%22%20cx%3D%220.36%22%20cy%3D%220.32%22%20r%3D%220.85%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(48.6%2C60%25%2C93%25)%22%2F%3E%3Cstop%20offset%3D%220.45%22%20stop-color%3D%22hsl(43.6%2C83%25%2C74%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(40.6%2C83%25%2C58%25)%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D%2235.63%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-2.57%2043.13%209.43)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-4.87%20112.13%209.43)%22%2F%3E%3Crect%20x%3D%2252.88%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(1.01%2060.38%2028.28)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(5.78%208.63%2047.13)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(0.97%2025.88%2047.13)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-1.97%2043.13%2047.13)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-3.22%20129.38%2047.13)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(0.86%208.63%2065.98)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-3.6%2077.63%2065.98)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(2.21%2094.88%2065.98)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%2258.48%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(4.38%20112.13%2065.98)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-5.35%2094.88%20103.68)%22%2F%3E%3Crect%20x%3D%22104.63%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-0.66%20112.13%20103.68)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(4.91%2025.88%20122.53)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-1.09%20129.38%20122.53)%22%2F%3E%3Crect%20x%3D%2218.38%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(0.39%2025.88%20141.38)%22%2F%3E%3C%2Fsvg%3E");
  animation: text-effect-twinkle 6s ease-in-out infinite;
}
.text-effect::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: 138px 150.8px;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0 transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22138%22%20height%3D%22150.8%22%20viewBox%3D%220%200%20138%20150.8%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22gl%22%20cx%3D%220.36%22%20cy%3D%220.32%22%20r%3D%220.85%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22hsl(48.6%2C60%25%2C93%25)%22%2F%3E%3Cstop%20offset%3D%220.45%22%20stop-color%3D%22hsl(43.6%2C83%25%2C74%25)%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(40.6%2C83%25%2C58%25)%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D%221.13%22%20y%3D%221.93%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(5.41%208.63%209.43)%22%2F%3E%3Crect%20x%3D%221.13%22%20y%3D%2220.78%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-4.66%208.63%2028.28)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%2239.63%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(2.93%2094.88%2047.13)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2277.33%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(1.88%2043.13%2084.83)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%2296.18%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-3.33%2043.13%20103.68)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-3.44%2077.63%20122.53)%22%2F%3E%3Crect%20x%3D%2287.38%22%20y%3D%22115.03%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(0.4%2094.88%20122.53)%22%2F%3E%3Crect%20x%3D%2235.63%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-2.54%2043.13%20141.38)%22%2F%3E%3Crect%20x%3D%2270.13%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(-4.2%2077.63%20141.38)%22%2F%3E%3Crect%20x%3D%22121.88%22%20y%3D%22133.88%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%221.5%22%20fill%3D%22url(%23gl)%22%20transform%3D%22rotate(0.46%20129.38%20141.38)%22%2F%3E%3C%2Fsvg%3E");
  animation: text-effect-twinkle 6s ease-in-out infinite;
  animation-delay: -3s;
}

@keyframes text-effect-twinkle {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.75; }
}
</style>

<div data-text="Your text" class="text-effect">Your text</div>
Category
Metallic & Holographic
Type
Static
Browser support
SVG tesserae tile via data-URI background-image + background-clip:text (all modern browsers)
Capabilities
pure, dataText

Related Metallic & Holographic effects