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.

If you liked this tip, you might enjoy my guide “You don’t need JavaScript”, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!