HTML + CSSBackgrounds

Leaded stained glass

Panes of colored glass joined by lead came drift slowly while a beam of sunlight sweeps across them, on canvas.

Settings

1x
1x
1

Code

<div class="pt-uvq16-stained-glass"><canvas></canvas></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Backgrounds

See all Backgrounds

Where to use it

A stained glass window built from a Voronoi diagram. Every pixel finds its two nearest seeds: close to the border between them it becomes lead, otherwise it takes the color of its pane, brighter in the middle and with a little hammered texture. The seeds drift, so the panes slowly change shape, and a diagonal sunbeam lights them as it passes.

The three colors give the glass, and each pane gets a lighter or darker shade for variety. Density changes the number of panes. It suits churches and heritage sites, glass studios, music artwork or any page that needs warm, backlit color.