Camouflage

How it works

Camouflage is a static fill & texture text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.

Controls

Camouflage exposes 2 dedicated controls — Palette and Blob Size — 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

/* Camouflage — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Major Mono Display', monospace (load from Google Fonts).
 */

.text-effect {
  font-family: 'Major Mono Display', monospace;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: none;
}

.text-effect {
  background:
    radial-gradient(61% 61% at 22% 28%, hsl(35 50% 50%), transparent 70%),
    radial-gradient(61% 61% at 78% 22%, hsl(28 35% 38%), transparent 70%),
    radial-gradient(61% 61% at 60% 80%, hsl(48 40% 73%), transparent 70%),
    radial-gradient(61% 61% at 30% 72%, hsl(28 35% 38%), transparent 70%),
    hsl(40 45% 63%);
  background-blend-mode: multiply;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

Related Fill & Texture effects

• Image Fill
• Starfield
• Stripe Fill
• Halftone Dots
• Scrolling Weave