Geode Core

How it works

Geode Core is a static fill & texture text effect rendered entirely in CSS. Each character is wrapped in its own span so it can animate independently — the HTML and JSX exports include that per-letter markup. It relies on an inline SVG <defs> block (filters, gradients or clip-paths), which the HTML export carries alongside the CSS.

Controls

Geode Core exposes 5 dedicated controls — Crystal Hue, Facet Count, Rind Roughness, Rind Thickness and Glint Intensity — 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

/* Geode Core — made with TEXT-FX · https://text-fx.app
 * HTML: each character is wrapped in a <span> — see the HTML export; requires the inline <svg> filter defs — see the HTML export.
 * Font: 'Space Mono', monospace (load from Google Fonts).
 */

.text-effect {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.text-effect {
  position: relative;
  white-space: pre;
}
.text-effect::after {
  content: "";
  position: absolute;
  inset: -10% -4%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.77;
  background:
    radial-gradient(circle at 20% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 3%),
    radial-gradient(circle at 68% 66%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 2.2%),
    radial-gradient(circle at 82% 22%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 1.6%),
    radial-gradient(circle at 38% 80%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 1.8%);
}
.text-effect .fx-ch {
  position: relative;
  display: inline-block;
}
.text-effect .fx-rind {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  color: hsl(32 20% 55%);
  transform: translate(0.046em, 0.046em) scale(1.126);
  filter: url(#text-effect-rind);
  pointer-events: none;
}
.text-effect .fx-core {
  position: relative;
  z-index: 1;
  display: inline-block;
  background-image: repeating-conic-gradient(from calc(var(--i) * 31.32deg) at 58% 54%,
    hsl(172 55% 19%) 0deg 6.67deg,
    hsl(172 55% 35%) 6.67deg 13.33deg,
    hsl(172 48% 51%) 13.33deg 18deg,
    hsl(172 42% 77%) 18deg 21.33deg,
    hsl(172 20% 97%) 21.33deg 24deg,
    hsl(172 52% 41%) 24deg 30.67deg,
    hsl(172 60% 23%) 30.67deg 36deg
  );
  background-size: 150% 150%;
  background-position: calc(var(--i) * 8%) calc(var(--i) * -6%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0.5px hsl(172 50% 8% / 0.55);
}

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: 'Space Mono', monospace;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.text-effect {
  position: relative;
  white-space: pre;
}
.text-effect::after {
  content: "";
  position: absolute;
  inset: -10% -4%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.77;
  background:
    radial-gradient(circle at 20% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 3%),
    radial-gradient(circle at 68% 66%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 2.2%),
    radial-gradient(circle at 82% 22%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 1.6%),
    radial-gradient(circle at 38% 80%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 1.8%);
}
.text-effect .fx-ch {
  position: relative;
  display: inline-block;
}
.text-effect .fx-rind {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  color: hsl(32 20% 55%);
  transform: translate(0.046em, 0.046em) scale(1.126);
  filter: url(#text-effect-rind);
  pointer-events: none;
}
.text-effect .fx-core {
  position: relative;
  z-index: 1;
  display: inline-block;
  background-image: repeating-conic-gradient(from calc(var(--i) * 31.32deg) at 58% 54%,
    hsl(172 55% 19%) 0deg 6.67deg,
    hsl(172 55% 35%) 6.67deg 13.33deg,
    hsl(172 48% 51%) 13.33deg 18deg,
    hsl(172 42% 77%) 18deg 21.33deg,
    hsl(172 20% 97%) 21.33deg 24deg,
    hsl(172 52% 41%) 24deg 30.67deg,
    hsl(172 60% 23%) 30.67deg 36deg
  );
  background-size: 150% 150%;
  background-position: calc(var(--i) * 8%) calc(var(--i) * -6%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0.5px hsl(172 50% 8% / 0.55);
}
</style>

<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<filter id="text-effect-rind" x="-40%" y="-40%" width="180%" height="180%" color-interpolation-filters="sRGB">
  <feTurbulence type="fractalNoise" baseFrequency="0.0465 0.093" numOctaves="3" seed="7" result="n"/>
  <feDisplacementMap in="SourceGraphic" in2="n" scale="12.6" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs></svg>

<div class="text-effect"><span class="fx-ch" style="--i:0"><span class="fx-rind" aria-hidden="true">Y</span><span class="fx-core">Y</span></span><span class="fx-ch" style="--i:1"><span class="fx-rind" aria-hidden="true">o</span><span class="fx-core">o</span></span><span class="fx-ch" style="--i:2"><span class="fx-rind" aria-hidden="true">u</span><span class="fx-core">u</span></span><span class="fx-ch" style="--i:3"><span class="fx-rind" aria-hidden="true">r</span><span class="fx-core">r</span></span><span class="fx-ch" style="--i:4"><span class="fx-rind" aria-hidden="true"> </span><span class="fx-core"> </span></span><span class="fx-ch" style="--i:5"><span class="fx-rind" aria-hidden="true">t</span><span class="fx-core">t</span></span><span class="fx-ch" style="--i:6"><span class="fx-rind" aria-hidden="true">e</span><span class="fx-core">e</span></span><span class="fx-ch" style="--i:7"><span class="fx-rind" aria-hidden="true">x</span><span class="fx-core">x</span></span><span class="fx-ch" style="--i:8"><span class="fx-rind" aria-hidden="true">t</span><span class="fx-core">t</span></span></div>

Related Fill & Texture effects

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