Synthwave Grid
3D & Depth · Animated · pure CSS
The full 80s album-cover scene: chrome-to-sunset lettering split by a bright horizon line leans back on its own perspective, standing on a neon grid floor that scrolls forever toward a glowing sun. Pure CSS — two repeating-gradient planes under a rotateX perspective, driving into the sunset.
How it works
Synthwave Grid is an animated 3d & depth text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Synthwave Grid exposes 4 dedicated controls — Palette, Grid Speed, Tilt and Sun — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Synthwave Grid — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Major Mono Display', monospace (load from Google Fonts).
*/
.text-effect {
font-family: 'Major Mono Display', monospace;
font-weight: 900;
letter-spacing: 2px;
text-transform: none;
}
.text-effect {
display: inline-block;
position: relative;
isolation: isolate;
overflow: hidden;
padding: 0.5em 1.05em 1.2em;
border-radius: 0.14em;
box-shadow: 0 14px 40px rgba(0,0,0,0.55),
inset 0 0 0 1px hsl(300 70% 60% / 0.22),
inset 0 0 44px hsl(280 80% 18% / 0.55);
}
.text-effect .fx-txt {
display: inline-block;
position: relative;
z-index: 1;
transform: perspective(700px) rotateX(16deg);
transform-origin: center 82%;
background: linear-gradient(180deg, hsl(196 55% 87%) 0%, hsl(214 40% 96%) 33%, hsl(48 100% 94%) 45%, hsl(48 100% 94%) 50%, hsl(30 100% 62%) 56%, hsl(330 96% 64%) 74%, hsl(278 82% 60%) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
background-size: 100% 100%;
filter: drop-shadow(0 0 5px hsl(325 100% 66% / 0.55)) drop-shadow(0 0 12px hsl(325 100% 66% / 0.55));
}
.text-effect::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(circle 2.15em at 50% 47%, hsl(46 100% 72%) 0 0.55em, hsl(28 100% 60%) 0.55em 1.35em, hsl(336 96% 58%) 1.35em 1.95em, transparent 2.15em),
radial-gradient(62% 7% at 50% 46%, hsl(328 100% 66%) 0%, hsl(328 100% 66% / 0.35) 42%, transparent 74%),
linear-gradient(to bottom, hsl(256 66% 13%) 0%, hsl(286 58% 9%) 34%, hsl(280 45% 4%) 45%, hsl(283 40% 3%) 47%, hsl(283 40% 3%) 100%);
}
.text-effect::after {
content: "";
position: absolute;
left: -45%;
right: -45%;
bottom: -3%;
height: 60%;
z-index: -1;
transform-origin: bottom center;
transform: perspective(160px) rotateX(62deg);
background-image:
repeating-linear-gradient(to right, hsl(190 100% 62%) 0 1.5px, transparent 1.5px 40px),
repeating-linear-gradient(to bottom, hsl(322 100% 66%) 0 1.5px, transparent 1.5px 40px);
-webkit-mask-image: linear-gradient(to top, #000 4%, rgba(0,0,0,0.9) 34%, transparent 94%);
mask-image: linear-gradient(to top, #000 4%, rgba(0,0,0,0.9) 34%, transparent 94%);
filter: drop-shadow(0 0 3px hsl(320 100% 60%));
animation: text-effect-drive 6.1s linear infinite;
pointer-events: none;
}
@keyframes text-effect-drive {
from { background-position: 0 0, 0 0; }
to { background-position: 0 0, 0 40px; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- 3D & Depth
- Type
- Animated
- Browser support
- 3D perspective transforms + background-clip:text + CSS mask (all modern browsers)
- Capabilities
- pure