Stained Glass

Fill & Texture · Static · pure CSS

Glyphs filled with a leaded cathedral window: an inline-SVG jittered grid of scattered sapphire, ruby, emerald, amber and violet panes meeting at hard freeform edges, clipped to the letters. A near-black leading network strokes every pane boundary with darker solder-joint dots at the intersections, and a subtle warm backlight reads as sunlight through the glass. Static; tune pane size, palette rotation, leading thickness and backlight.

Open in the generator →All effects
Stained Glass

How it works

Stained Glass 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

Stained Glass exposes 5 dedicated controls — Pane Size, Palette Rotation, Leading, Backlight and Pattern — 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

/* Stained Glass — made with TEXT-FX · https://text-fx.app
 * HTML: just put the class on any element.
 * Font: 'Bungee', cursive (load from Google Fonts).
 */

.text-effect {
  font-family: 'Bungee', cursive;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.text-effect {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'182'%20height%3D'130'%20viewBox%3D'0%200%20182%20130'%3E%3Crect%20width%3D'182'%20height%3D'130'%20fill%3D'hsl(220%2C18%25%2C6%25)'%2F%3E%3Cg%20stroke%3D'hsl(220%2C18%25%2C6%25)'%20stroke-width%3D'2.5'%20stroke-linejoin%3D'round'%20stroke-linecap%3D'round'%3E%3Cpolygon%20points%3D'0%2C0%2026%2C0%2027.8%2C30.3%200%2C26'%20fill%3D'hsl(20%2C88%25%2C60%25)'%2F%3E%3Cpolygon%20points%3D'0%2C26%2027.8%2C30.3%2032.6%2C58.9%200%2C52'%20fill%3D'hsl(130%2C66%25%2C44%25)'%2F%3E%3Cpolygon%20points%3D'0%2C52%2032.6%2C58.9%2023.1%2C81.7%200%2C78'%20fill%3D'hsl(196%2C80%25%2C60%25)'%2F%3E%3Cpolygon%20points%3D'0%2C78%2023.1%2C81.7%2021.2%2C107%200%2C104'%20fill%3D'hsl(328%2C74%25%2C55%25)'%2F%3E%3Cpolygon%20points%3D'0%2C104%2021.2%2C107%2026%2C130%200%2C130'%20fill%3D'hsl(258%2C56%25%2C64%25)'%2F%3E%3Cpolygon%20points%3D'26%2C0%2052%2C0%2045.7%2C19.2%2027.8%2C30.3'%20fill%3D'hsl(258%2C56%25%2C46%25)'%2F%3E%3Cpolygon%20points%3D'27.8%2C30.3%2045.7%2C19.2%2047.3%2C44.9%2032.6%2C58.9'%20fill%3D'hsl(328%2C74%25%2C60%25)'%2F%3E%3Cpolygon%20points%3D'32.6%2C58.9%2047.3%2C44.9%2058%2C77.2%2023.1%2C81.7'%20fill%3D'hsl(20%2C88%25%2C68%25)'%2F%3E%3Cpolygon%20points%3D'23.1%2C81.7%2058%2C77.2%2046.8%2C106.7%2021.2%2C107'%20fill%3D'hsl(328%2C74%25%2C46%25)'%2F%3E%3Cpolygon%20points%3D'21.2%2C107%2046.8%2C106.7%2052%2C130%2026%2C130'%20fill%3D'hsl(258%2C56%25%2C59%25)'%2F%3E%3Cpolygon%20points%3D'52%2C0%2078%2C0%2080.7%2C19.5%2045.7%2C19.2'%20fill%3D'hsl(258%2C56%25%2C56%25)'%2F%3E%3Cpolygon%20points%3D'45.7%2C19.2%2080.7%2C19.5%2072.5%2C49.7%2047.3%2C44.9'%20fill%3D'hsl(130%2C66%25%2C46%25)'%2F%3E%3Cpolygon%20points%3D'47.3%2C44.9%2072.5%2C49.7%2073.6%2C79.7%2058%2C77.2'%20fill%3D'hsl(328%2C74%25%2C55%25)'%2F%3E%3Cpolygon%20points%3D'58%2C77.2%2073.6%2C79.7%2071.3%2C97%2046.8%2C106.7'%20fill%3D'hsl(196%2C80%25%2C46%25)'%2F%3E%3Cpolygon%20points%3D'46.8%2C106.7%2071.3%2C97%2078%2C130%2052%2C130'%20fill%3D'hsl(196%2C80%25%2C60%25)'%2F%3E%3Cpolygon%20points%3D'78%2C0%20104%2C0%20106.4%2C27.7%2080.7%2C19.5'%20fill%3D'hsl(258%2C56%25%2C54%25)'%2F%3E%3Cpolygon%20points%3D'80.7%2C19.5%20106.4%2C27.7%20106%2C52.2%2072.5%2C49.7'%20fill%3D'hsl(258%2C56%25%2C54%25)'%2F%3E%3Cpolygon%20points%3D'72.5%2C49.7%20106%2C52.2%20108.1%2C83.4%2073.6%2C79.7'%20fill%3D'hsl(20%2C88%25%2C63%25)'%2F%3E%3Cpolygon%20points%3D'73.6%2C79.7%20108.1%2C83.4%20109.7%2C99.7%2071.3%2C97'%20fill%3D'hsl(20%2C88%25%2C68%25)'%2F%3E%3Cpolygon%20points%3D'71.3%2C97%20109.7%2C99.7%20104%2C130%2078%2C130'%20fill%3D'hsl(328%2C74%25%2C42%25)'%2F%3E%3Cpolygon%20points%3D'104%2C0%20130%2C0%20126.2%2C23.7%20106.4%2C27.7'%20fill%3D'hsl(328%2C74%25%2C52%25)'%2F%3E%3Cpolygon%20points%3D'106.4%2C27.7%20126.2%2C23.7%20134.9%2C56.6%20106%2C52.2'%20fill%3D'hsl(196%2C80%25%2C46%25)'%2F%3E%3Cpolygon%20points%3D'106%2C52.2%20134.9%2C56.6%20125.8%2C79.6%20108.1%2C83.4'%20fill%3D'hsl(130%2C66%25%2C36%25)'%2F%3E%3Cpolygon%20points%3D'108.1%2C83.4%20125.8%2C79.6%20133.3%2C97.6%20109.7%2C99.7'%20fill%3D'hsl(328%2C74%25%2C50%25)'%2F%3E%3Cpolygon%20points%3D'109.7%2C99.7%20133.3%2C97.6%20130%2C130%20104%2C130'%20fill%3D'hsl(328%2C74%25%2C50%25)'%2F%3E%3Cpolygon%20points%3D'130%2C0%20156%2C0%20150%2C23.7%20126.2%2C23.7'%20fill%3D'hsl(20%2C88%25%2C54%25)'%2F%3E%3Cpolygon%20points%3D'126.2%2C23.7%20150%2C23.7%20162.8%2C46.9%20134.9%2C56.6'%20fill%3D'hsl(130%2C66%25%2C40%25)'%2F%3E%3Cpolygon%20points%3D'134.9%2C56.6%20162.8%2C46.9%20152.7%2C71.5%20125.8%2C79.6'%20fill%3D'hsl(258%2C56%25%2C46%25)'%2F%3E%3Cpolygon%20points%3D'125.8%2C79.6%20152.7%2C71.5%20151%2C102.6%20133.3%2C97.6'%20fill%3D'hsl(130%2C66%25%2C40%25)'%2F%3E%3Cpolygon%20points%3D'133.3%2C97.6%20151%2C102.6%20156%2C130%20130%2C130'%20fill%3D'hsl(258%2C56%25%2C50%25)'%2F%3E%3Cpolygon%20points%3D'156%2C0%20182%2C0%20182%2C26%20150%2C23.7'%20fill%3D'hsl(20%2C88%25%2C60%25)'%2F%3E%3Cpolygon%20points%3D'150%2C23.7%20182%2C26%20182%2C52%20162.8%2C46.9'%20fill%3D'hsl(196%2C80%25%2C60%25)'%2F%3E%3Cpolygon%20points%3D'162.8%2C46.9%20182%2C52%20182%2C78%20152.7%2C71.5'%20fill%3D'hsl(258%2C56%25%2C46%25)'%2F%3E%3Cpolygon%20points%3D'152.7%2C71.5%20182%2C78%20182%2C104%20151%2C102.6'%20fill%3D'hsl(258%2C56%25%2C50%25)'%2F%3E%3Cpolygon%20points%3D'151%2C102.6%20182%2C104%20182%2C130%20156%2C130'%20fill%3D'hsl(328%2C74%25%2C46%25)'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'hsl(220%2C22%25%2C4%25)'%3E%3Ccircle%20cx%3D'27.8'%20cy%3D'30.3'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'32.6'%20cy%3D'58.9'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'23.1'%20cy%3D'81.7'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'21.2'%20cy%3D'107'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'45.7'%20cy%3D'19.2'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'47.3'%20cy%3D'44.9'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'58'%20cy%3D'77.2'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'46.8'%20cy%3D'106.7'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'80.7'%20cy%3D'19.5'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'72.5'%20cy%3D'49.7'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'73.6'%20cy%3D'79.7'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'71.3'%20cy%3D'97'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'106.4'%20cy%3D'27.7'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'106'%20cy%3D'52.2'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'108.1'%20cy%3D'83.4'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'109.7'%20cy%3D'99.7'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'126.2'%20cy%3D'23.7'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'134.9'%20cy%3D'56.6'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'125.8'%20cy%3D'79.6'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'133.3'%20cy%3D'97.6'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'150'%20cy%3D'23.7'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'162.8'%20cy%3D'46.9'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'152.7'%20cy%3D'71.5'%20r%3D'2.88'%2F%3E%3Ccircle%20cx%3D'151'%20cy%3D'102.6'%20r%3D'2.88'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 182px 130px;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0.88px hsl(220,18%,6%);
  filter: drop-shadow(0 0 6.6px hsla(38,92%,60%,0.26)) drop-shadow(0 0 17.4px hsla(38,92%,60%,0.26)) drop-shadow(0 1px 1.5px hsla(222,30%,4%,0.5));
}

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

Category
Fill & Texture
Type
Static
Browser support
background-clip:text over an inline-SVG (data-URI) leaded jewel-pane mosaic
Capabilities
pure

Related Fill & Texture effects