Retro Synthwave Grid Background
An 80s outrun drive: a neon grid floor rushes toward a glowing horizon and a ridge of mountains. The floor is one plane laid flat with perspective and moved by one cell per loop.
Also known as: synthwave background css, retro grid background, outrun grid animation.
HTML
<div class="bgx-retro-synthwave-grid" aria-hidden="true"> <span class="bgx-retro-synthwave-grid-rim"></span> <span class="bgx-retro-synthwave-grid-ridge"></span> <span class="bgx-retro-synthwave-grid-floor"><i></i></span> </div>
CSS
.bgx-retro-synthwave-grid {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--cell: 2.5em;
--sky: oklch(from var(--c) 0.16 0.07 calc(h + 40));
--haze: oklch(from var(--c) 0.42 0.18 calc(h + 75));
--line: oklch(from var(--c) 0.74 0.2 calc(h + 75));
--ridge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V30L34 21L55 29L82 11L108 27L131 19L152 26L181 5L208 23L233 15L259 28L286 13L313 25L340 17L366 29L400 30V40Z'/%3E%3C/svg%3E") 0 100% / 44em 100% repeat-x;
background:
radial-gradient(ellipse 60% 45% at 50% 58%, color-mix(in srgb, var(--haze) 85%, transparent), transparent),
linear-gradient(var(--sky) 10%, var(--haze) 58%);
}
.bgx-retro-synthwave-grid-rim,
.bgx-retro-synthwave-grid-ridge {
position: absolute;
left: 0;
right: 0;
bottom: 42%;
height: 3.4em;
-webkit-mask: var(--ridge);
mask: var(--ridge);
}
.bgx-retro-synthwave-grid-rim {
background: var(--line);
transform: translateY(-0.13em);
filter: drop-shadow(0 0 0.4em var(--line));
}
.bgx-retro-synthwave-grid-ridge {
background: linear-gradient(oklch(from var(--c) 0.2 0.08 calc(h + 50)), oklch(from var(--c) 0.12 0.05 calc(h + 40)));
}
.bgx-retro-synthwave-grid-floor {
position: absolute;
inset: 58% 0 0;
overflow: hidden;
perspective: 8em;
perspective-origin: 50% 0;
background: linear-gradient(var(--haze), oklch(from var(--c) 0.2 0.08 calc(h + 60)) 30%, oklch(from var(--c) 0.12 0.05 calc(h + 40)));
box-shadow: inset 0 1px var(--line);
}
.bgx-retro-synthwave-grid-floor > i {
position: absolute;
top: 100%;
left: -100%;
width: 300%;
height: 50em;
overflow: hidden;
transform-origin: 50% 0;
transform: rotateX(-90deg);
-webkit-mask: linear-gradient(#000 5%, transparent 40%);
mask: linear-gradient(#000 5%, transparent 40%);
}
.bgx-retro-synthwave-grid-floor > i::before {
content: "";
position: absolute;
inset: 0 0 calc(var(--cell) * -1);
background:
linear-gradient(90deg, var(--line) 0.14em, transparent 0.14em) 50% 0 / var(--cell) var(--cell),
linear-gradient(var(--line) 0.14em, transparent 0.14em) 0 0 / var(--cell) var(--cell);
animation: bgx-retro-synthwave-grid-run 1.1s linear infinite;
}
@keyframes bgx-retro-synthwave-grid-run {
to { transform: translateY(calc(var(--cell) * -1)); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-retro-synthwave-grid, .bgx-retro-synthwave-grid *, .bgx-retro-synthwave-grid::before, .bgx-retro-synthwave-grid::after, .bgx-retro-synthwave-grid *::before, .bgx-retro-synthwave-grid *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.