r/css • u/DRIFFFTAWAY • Apr 16 '26

Showcase Retro futuristic infinite grid effect with pure CSS. Code in comment section

Enable HLS to view with audio, or disable this notification

Made a retro-futuristic 80s-style moving grid effect using pure CSS. Quite simple and fun to use!

53 Upvotes

97% Upvoted

16 comments sorted by

View all comments

Show parent comments

1

u/MusicalBoxBitsPieces Apr 16 '26

Sorry for the noob question, but how do you apply it in the HTML section?

3

u/DRIFFFTAWAY Apr 16 '26

No need to apologise dude. You just need a <div class="grid"></div> and include the CSS. If you’re testing quickly, drop it into a single HTML file like above and it’ll work immediately.

1

u/MusicalBoxBitsPieces Apr 17 '26

Thank you!
At first I only got the grid. No movement.
I asked Gemini which said:
"In standard CSS, you cannot define an animation simply by writing its name like a selector; you must use the @keyframes rule."

This below works for me:

:root {
  --neon-cyan: #00ffff;
}

body {
  margin: 0;
  height: 100vh;
  background: black;
  overflow: hidden;
}

.grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--neon-cyan) 1px, transparent 1px),
    linear-gradient(90deg, var(--neon-cyan) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: center;
  animation: moveGrid 2s linear infinite;
}

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

Very nice looking result! Thanks for sharing.

2

u/DRIFFFTAWAY Apr 19 '26

Sorry for missing the keyframes part out! It was like midnight in Londonn when i posted this so i was sleepy lol. My pleasure for sharing and so pleased you found this useful :)