Build an animated perspective grid in pure CSS.

You can create an animated perspective grid in CSS.

Here’s the idea:

First, draw the grid with 2 linear gradients.

One for the horizontal lines. One for the vertical ones.

.el {
	background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px);
	background-size: 50px 50px;
}

That gives you a simple square grid.

Then tilt it in 3D:

transform: perspective(900px) rotateX(50deg); transform-origin: center;

Now it starts to look like a floor.

To make it fade naturally into the distance, add a mask:

.el {
	mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 0.3));
	-webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 0.3));
}

And finally, animate the background position:

@keyframes moveGrid {
	from {
		background-position: center 0;
	}
	to {
		background-position: center 100px;
	}
}

That’s what creates the movement.

The lines themselves do not move as elements. You just shift the background pattern.

So the full effect is:

2 gradients for the grid
a perspective transform for depth
a mask for atmosphere
and a background animation for motion

A nice example of how far simple layers can go.

I wrote a guide about building modern UI with HTML and CSS first. It covers practical patterns you can use before reaching for JavaScript.

Learn more

Build an animated perspective grid in pure CSS.

You can create an animated perspective grid in CSS.

Other short articles you might like