CSS RETRO GRID GENERATOR

Example output (default settings)

.retro-grid {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  height: 340px;
  background: linear-gradient(180deg, #1a0b3b 0%, #a4287f 55%);
}

.retro-grid__sun {
  position: absolute;
  left: 50%;
  bottom: calc(45% - 31px);
  width: 170px;
  height: 170px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe66d, #ff3c7e);
  box-shadow: 0 0 57px #ff3c7e;
  -webkit-mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 56%, #000 56% 63%, transparent 63% 69%, #000 69% 77%, transparent 77% 85%, #000 85% 100%);
  mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 56%, #000 56% 63%, transparent 63% 69%, #000 69% 77%, transparent 77% 85%, #000 85% 100%);
}

.retro-grid__floor {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  overflow: hidden;
  perspective: 350px;
  background: linear-gradient(180deg, #0c0220, #2a0a52);
}

.retro-grid__lines {
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 300%;
  transform-origin: 50% 0;
  transform: rotateX(60deg);
  background-image:
    linear-gradient(#ff4fd8 2px, transparent 2px),
    linear-gradient(90deg, #ff4fd8 2px, transparent 2px);
  background-size: 48px 48px;
  background-position: center top;
  animation: retro-grid-scroll 1.2s linear infinite;
}

/* soft fade into the horizon */
.retro-grid__floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #a4287f, transparent 45%);
  pointer-events: none;
}

@keyframes retro-grid-scroll {
  from { background-position: center 0; }
  to { background-position: center 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .retro-grid__lines { animation: none; }
}

<div class="retro-grid">
  <div class="retro-grid__sun"></div>
  <div class="retro-grid__floor">
    <div class="retro-grid__lines"></div>
  </div>
</div>

How to make a CSS retro grid

1. 1

   Pick a style (Synthwave, Tron, Sunset or Matrix) to start from a palette, then change any of the seven colors.

2. 2

   Turn the sun, the sun stripes and the scrolling grid on or off.

3. 3

   Drag the sliders for scene height, horizon, floor tilt, perspective, grid cell, line width and sun size.

4. 4

   Copy the CSS and HTML, or copy a link to your settings, and paste them into your page.

Questions

How does the 3D floor work without canvas or WebGL?

The floor is a tall element with two linear-gradient layers that draw horizontal and vertical lines. Its parent sets a CSS perspective, and the element itself is tilted with rotateX around its top edge, so the lines get closer together toward the horizon. It is plain CSS with no images and no script.

How is the grid animated?

A keyframe animation moves the background-position of the line layers down by exactly one grid cell per cycle and repeats it, so the loop is seamless. The 'Seconds per cell' slider sets the duration. The output also includes a prefers-reduced-motion rule that stops the scrolling for visitors who ask for less motion.

How are the stripes cut into the sun?

The sun is a circle with a vertical gradient, and a mask-image made of stacked linear-gradient bands hides thin horizontal slices in its lower half, thicker toward the bottom. The slices are transparent, so whatever is behind the sun shows through. The CSS sets both -webkit-mask-image and mask-image.

How do I put content on top of the retro grid?

The scene is a relatively positioned box, so add your own element inside .retro-grid with position: absolute (or place it in a wrapper with z-index above the scene) and it will sit on top of the sky, sun and floor. The scene uses isolation: isolate, so its layers do not leak into the rest of your page's stacking order.

Can I make the scene fill the whole screen?

Yes. In the copied CSS, change the .retro-grid height from the fixed pixel value to 100vh, or to 100% inside a parent that has a height. The floor and sun are positioned in percentages of the scene, so they follow the new size; only the sun diameter and the grid cell stay in pixels.

Why does the grid look aliased or flicker near the horizon?

Far from the viewer the perspective squeezes many lines into a few pixels, which no browser can anti-alias perfectly. A thicker line width, a larger grid cell or a lower tilt reduces it, and the soft fade at the horizon hides most of what is left.

Related tools

• CSS Starfield / Dots GeneratorScatter hundreds of points from a single box-shadow into a drifting, parallax starfield background and copy the CSS.
• Aurora Background GeneratorCreate a drifting northern-lights background from blurred, animated color blobs blended with mix-blend-mode.
• Animated Gradient Background GeneratorBuild a slow-moving, multi-color gradient background for hero sections and banners.
• CSS Animated Glowing Border GeneratorBuild a rotating conic-gradient border that chases around a card, with adjustable speed, thickness, and glow blur.
• CSS CRT / Scanlines / VHS GeneratorBuild a retro CRT screen overlay with scanlines, vignette, phosphor tint, and flicker animation, then copy the CSS.
• CSS Skeleton Loader GeneratorDesign a skeleton loading placeholder with a shimmer or pulse animation, custom colors, speed, and radius, then copy the HTML and CSS.
• CSS View Transitions GeneratorBuild View Transitions animations (crossfade, slide, cover, zoom, blur, wipe, circle reveal) with a live preview, and copy the CSS, HTML and startViewTransition script.
• CSS Ripple Effect GeneratorDesign a Material-style click ripple for buttons with custom color, opacity, duration, and easing, then copy the CSS and JavaScript.