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:
    6.24px 0px 0 hsl(45 60% 93%),
    5.4px 3.12px 0 hsl(45 60% 93%),
    3.12px 5.4px 0 hsl(45 60% 93%),
    0px 6.24px 0 hsl(45 60% 93%),
    -3.12px 5.4px 0 hsl(45 60% 93%),
    -5.4px 3.12px 0 hsl(45 60% 93%),
    -6.24px 0px 0 hsl(45 60% 93%),
    -5.4px -3.12px 0 hsl(45 60% 93%),
    -3.12px -5.4px 0 hsl(45 60% 93%),
    0px -6.24px 0 hsl(45 60% 93%),
    3.12px -5.4px 0 hsl(45 60% 93%),
    5.4px -3.12px 0 hsl(45 60% 93%),
    2.6px 0px 0 hsl(216 40% 14%),
    2.25px 1.3px 0 hsl(216 40% 14%),
    1.3px 2.25px 0 hsl(216 40% 14%),
    0px 2.6px 0 hsl(216 40% 14%),
    -1.3px 2.25px 0 hsl(216 40% 14%),
    -2.25px 1.3px 0 hsl(216 40% 14%),
    -2.6px 0px 0 hsl(216 40% 14%),
    -2.25px -1.3px 0 hsl(216 40% 14%),
    -1.3px -2.25px 0 hsl(216 40% 14%),
    0px -2.6px 0 hsl(216 40% 14%),
    1.3px -2.25px 0 hsl(216 40% 14%),
    2.25px -1.3px 0 hsl(216 40% 14%);
  filter: drop-shadow(2px 5px 4px 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