Oxide Bloom

How it works

Oxide Bloom is a static elemental & nature 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

Oxide Bloom exposes 5 dedicated controls — Rust Hue, Pit Erosion, Corrosion, Bloom Halo and Seed — 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

/* Oxide Bloom — 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: 0px;
  text-transform: none;
}

.text-effect {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.text-effect .fx-plate {
  position: relative;
  display: inline-block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-color: hsl(211 10% 33%);
  background-image:
      radial-gradient(closest-side at 18% 30%, hsl(27 79% 38% / 0.95), hsl(27 79% 38% / 0) 60%),
      radial-gradient(closest-side at 44% 72%, hsl(28 84% 52% / 0.95), hsl(28 84% 52% / 0) 55%),
      radial-gradient(closest-side at 68% 24%, hsl(26 78% 34% / 0.95), hsl(26 78% 34% / 0) 55%),
      radial-gradient(closest-side at 82% 66%, hsl(32 80% 60% / 0.9), hsl(32 80% 60% / 0) 55%),
      radial-gradient(closest-side at 30% 88%, hsl(26 48% 32% / 0.9), hsl(26 48% 32% / 0) 60%),
      linear-gradient(115deg, hsl(26 30% 46%) 0%, hsl(30 44% 50%) 22%, hsl(22 24% 40%) 45%, hsl(33 44% 56%) 70%, hsl(44 12% 38%) 100%);
  filter: url(#text-effect-pit) drop-shadow(0 0 6.4px hsl(32 95% 55% / 0.53)) drop-shadow(0 0 20.3px hsl(32 95% 55% / 0.53));
}
.text-effect .fx-bloom {
  position: absolute;
  left: 0;
  top: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: radial-gradient(closest-side at 40% 60%, hsl(35 88% 58%), hsl(28 82% 46%) 60%, hsl(25 80% 33%) 100%);
  filter: url(#text-effect-pit) blur(13.2px);
  mix-blend-mode: screen;
  opacity: 0.84;
  transform: scale(1.04);
  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: 0px;
  text-transform: none;
}

.text-effect {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.text-effect .fx-plate {
  position: relative;
  display: inline-block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-color: hsl(211 10% 33%);
  background-image:
      radial-gradient(closest-side at 18% 30%, hsl(27 79% 38% / 0.95), hsl(27 79% 38% / 0) 60%),
      radial-gradient(closest-side at 44% 72%, hsl(28 84% 52% / 0.95), hsl(28 84% 52% / 0) 55%),
      radial-gradient(closest-side at 68% 24%, hsl(26 78% 34% / 0.95), hsl(26 78% 34% / 0) 55%),
      radial-gradient(closest-side at 82% 66%, hsl(32 80% 60% / 0.9), hsl(32 80% 60% / 0) 55%),
      radial-gradient(closest-side at 30% 88%, hsl(26 48% 32% / 0.9), hsl(26 48% 32% / 0) 60%),
      linear-gradient(115deg, hsl(26 30% 46%) 0%, hsl(30 44% 50%) 22%, hsl(22 24% 40%) 45%, hsl(33 44% 56%) 70%, hsl(44 12% 38%) 100%);
  filter: url(#text-effect-pit) drop-shadow(0 0 6.4px hsl(32 95% 55% / 0.53)) drop-shadow(0 0 20.3px hsl(32 95% 55% / 0.53));
}
.text-effect .fx-bloom {
  position: absolute;
  left: 0;
  top: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: radial-gradient(closest-side at 40% 60%, hsl(35 88% 58%), hsl(28 82% 46%) 60%, hsl(25 80% 33%) 100%);
  filter: url(#text-effect-pit) blur(13.2px);
  mix-blend-mode: screen;
  opacity: 0.84;
  transform: scale(1.04);
  pointer-events: none;
}
</style>

<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<filter id="text-effect-pit" x="-30%" y="-30%" width="160%" height="160%">
  <feTurbulence type="fractalNoise" baseFrequency="0.077 0.067" numOctaves="3" seed="33" result="n"/>
  <feColorMatrix in="n" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -16 10.42" result="mask"/>
  <feMorphology in="mask" operator="erode" radius="0.44" result="eaten"/>
  <feComposite in="SourceGraphic" in2="eaten" operator="in"/>
</filter>
</defs></svg>

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

Related Elemental & Nature effects

• Aurora
• Fire
• Gooey
• Ice
• Water Fill