Playground
PLATFORM
  • Tails

    Create websites with TailwindCSS

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

Retro Grid

An animated scrolling retro grid element.

+ Tailwind and Alpine

Copied!

Retro-Grid

<style>
    @keyframes grid {
        0% { transform: translateY(-50%); }
        100% { transform: translateY(0); }
    }
    .animate-grid {
        animation: grid 15s linear infinite;
    }
    .synthwave-grid {
        background-repeat: repeat;
        background-size: 60px 60px;
        height: 300vh;
        inset: 0% 0px;
        margin-left: -50%;
        transform-origin: 100% 0 0;
        width: 600vw;
    }
    :not(.dark) .synthwave-grid-light {
        background-image: 
            linear-gradient(to right, rgba(0,0,0,0.6) 1px, transparent 0),
            linear-gradient(to bottom, rgba(0,0,0,0.6) 1px, transparent 0);
    }
    .dark .synthwave-grid-dark {
        background-image: 
            linear-gradient(to right, rgba(255,255,255,0.7) 1px, transparent 0),
            linear-gradient(to bottom, rgba(255,255,255,0.7) 1px, transparent 0);
    }
</style>
<div x-data="{ angle: 60 }" class="relative min-h-[420px] flex flex-col items-center justify-center w-full h-full overflow-hidden border-0" x-cloak>
    <h1 class="absolute w-full h-auto text-5xl font-bold text-center">Retro-Grid</h1>
    
    <div class="absolute inset-0 w-full h-full overflow-hidden opacity-50 pointer-events-none" style="perspective: 200px;">
        <div class="absolute inset-0" :style="{ transform: `rotateX(${angle}deg)` }">
            <div class="animate-grid synthwave-grid synthwave-grid-light synthwave-grid-dark"></div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black"></div>
    </div>
</div>

Data

Below you will find the data properties available in the x-data attribute of this element.


Property and Description
angle
The angle of the retro grid, which is the degree that the grid is tilted.

More Examples

Below you will find more Retro Grid examples you may wish to use in your projects.


Copied!

Retro-Grid

<style>
    @keyframes grid {
        0% { transform: translateY(-50%); }
        100% { transform: translateY(0); }
    }
    .animate-grid {
        animation: grid 15s linear infinite;
    }
    .synthwave-grid {
        background-repeat: repeat;
        background-size: 60px 60px;
        height: 300vh;
        inset: 0% 0px;
        margin-left: -50%;
        transform-origin: 100% 0 0;
        width: 600vw;
    }
    :not(.dark) .synthwave-grid-light {
        background-image: 
            linear-gradient(to right, rgba(0,0,0,0.6) 1px, transparent 0),
            linear-gradient(to bottom, rgba(0,0,0,0.6) 1px, transparent 0);
    }
    .dark .synthwave-grid-dark {
        background-image: 
            linear-gradient(to right, rgba(255,255,255,0.4) 1px, transparent 0),
            linear-gradient(to bottom, rgba(255,255,255,0.4) 1px, transparent 0);
    }
</style>
<div x-data="{ angle: 60 }" class="relative dark bg-gray-900 min-h-[420px] flex flex-col items-center justify-center w-full h-full overflow-hidden border-0" x-cloak>
    <h1 class="absolute w-full h-auto text-5xl font-bold text-center text-white">Retro-Grid</h1>
    
    <div class="absolute inset-0 w-full h-full overflow-hidden opacity-50 pointer-events-none" style="perspective: 200px;">
        <div class="absolute inset-0" :style="{ transform: `rotateX(${angle}deg)` }">
            <div class="animate-grid synthwave-grid synthwave-grid-light synthwave-grid-dark"></div>
        </div>
        <div class="absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t from-black to-transparent"></div>
    </div>
</div>