HTML + CSSBackgrounds

Conway's Game of Life

Game of Life running live: cells are born in one color, live in another and leave a fading trail as the pointer adds more.

Settings

Color 1#00c98d

Color 2#ff3d81

Color 3#ffe66d

Speed1x

Density / scale1x

Opacity1

Code

index.html

<div class="pt-uvq16-life"><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

Mesh gradient

BackgroundsHTML + CSS

Northern lights background

BackgroundsHTML + CSS

Breathing gradient

BackgroundsHTML + CSS

Liquid sunset background

BackgroundsHTML + CSS

Dot grid wave

BackgroundsHTML + CSS

Synthwave grid

BackgroundsHTML + CSS

Honeycomb background

BackgroundsHTML + CSS

Diagonal light lines

BackgroundsHTML + CSS

Where to use it

John Conway's cellular automaton as a living background. Each cell checks its eight neighbours ten times a second: three neighbours bring it to life, two or three keep it alive, anything else kills it. Newborn cells flash in the third color, living ones use the first, and dead cells leave a trail in the second that fades out slowly.

Density sets the cell size and speed the number of generations per second. Drag the pointer to paint new cells, and when the population gets too thin a small R-pentomino is dropped in to stir things up again. Perfect for science, coding schools and maker communities.