Varsity Patch

Fill & Texture · Static · pure CSS

A collegiate letterman patch: the glyphs fill with a low-contrast chenille fiber fuzz — two mismatched repeating-radial-gradient fields interfering over a sheened team-color base — wrapped in three nested sewn rings of cream felt, deep team color, and dark stitch built from stacked multi-directional hard text-shadows. A soft directional drop-shadow lifts the whole patch off the page like it's appliqued on, with crimson, navy, and forest team defaults.

Open in the generator →All effects
Varsity Patch

How it works

Varsity Patch 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

Varsity Patch exposes 3 dedicated controls — Team Hue, Rings and Fuzz — 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

/* Varsity Patch — made with TEXT-FX · https://text-fx.app
 * HTML: just put the class on any element.
 * Font: 'Recursive', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Recursive', sans-serif;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
}

.text-effect {
  position: relative;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0.043em 0em 0 hsl(45 60% 93%),
    0.04em 0.017em 0 hsl(45 60% 93%),
    0.031em 0.031em 0 hsl(45 60% 93%),
    0.017em 0.04em 0 hsl(45 60% 93%),
    0em 0.043em 0 hsl(45 60% 93%),
    -0.017em 0.04em 0 hsl(45 60% 93%),
    -0.031em 0.031em 0 hsl(45 60% 93%),
    -0.04em 0.017em 0 hsl(45 60% 93%),
    -0.043em 0em 0 hsl(45 60% 93%),
    -0.04em -0.017em 0 hsl(45 60% 93%),
    -0.031em -0.031em 0 hsl(45 60% 93%),
    -0.017em -0.04em 0 hsl(45 60% 93%),
    0em -0.043em 0 hsl(45 60% 93%),
    0.017em -0.04em 0 hsl(45 60% 93%),
    0.031em -0.031em 0 hsl(45 60% 93%),
    0.04em -0.017em 0 hsl(45 60% 93%),
    0.018em 0em 0 hsl(216 40% 14%),
    0.017em 0.007em 0 hsl(216 40% 14%),
    0.013em 0.013em 0 hsl(216 40% 14%),
    0.007em 0.017em 0 hsl(216 40% 14%),
    0em 0.018em 0 hsl(216 40% 14%),
    -0.007em 0.017em 0 hsl(216 40% 14%),
    -0.013em 0.013em 0 hsl(216 40% 14%),
    -0.017em 0.007em 0 hsl(216 40% 14%),
    -0.018em 0em 0 hsl(216 40% 14%),
    -0.017em -0.007em 0 hsl(216 40% 14%),
    -0.013em -0.013em 0 hsl(216 40% 14%),
    -0.007em -0.017em 0 hsl(216 40% 14%),
    0em -0.018em 0 hsl(216 40% 14%),
    0.007em -0.017em 0 hsl(216 40% 14%),
    0.013em -0.013em 0 hsl(216 40% 14%),
    0.017em -0.007em 0 hsl(216 40% 14%);
  filter: drop-shadow(0.025em 0.06em 0.05em hsl(0 0% 0% / 0.5));
}
.text-effect .fx-fuzz {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: repeating-radial-gradient(circle at 30% 26%, hsl(216 56% 76% / 0.55) 0, hsl(216 56% 76% / 0.55) 0.6px, transparent 0.6px, transparent 3.09px), repeating-radial-gradient(circle at 72% 74%, hsl(216 80% 38% / 0.45) 0, hsl(216 80% 38% / 0.45) 0.7px, transparent 0.7px, transparent 4.14px), linear-gradient(178deg, hsl(216 70% 62%), hsl(216 70% 50%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

Pure CSS — just add the .text-effect class to any element.

Category
Fill & Texture
Type
Static
Browser support
background-clip:text fuzz + layered hard text-shadow rings + filter drop-shadow (all modern browsers)
Capabilities
pure

Related Fill & Texture effects