Synthwave Grid

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 .fx-sun {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 4em;
  height: 4em;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(to bottom, hsl(50 100% 92%) 0%, hsl(44 100% 74%) 20%, hsl(32 100% 60%) 46%, hsl(344 96% 60%) 74%, hsl(330 92% 52%) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 52%, #000 52% 54%, transparent 54% 56%, #000 56% 60%, transparent 60% 63%, #000 63% 68%, transparent 68% 72%, #000 72% 78%, transparent 78% 83%, #000 83% 90%, transparent 90% 100%);
  mask-image: linear-gradient(to bottom, #000 0 52%, #000 52% 54%, transparent 54% 56%, #000 56% 60%, transparent 60% 63%, #000 63% 68%, transparent 68% 72%, #000 72% 78%, transparent 78% 83%, #000 83% 90%, transparent 90% 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: drop-shadow(0 0 0.4em hsl(40 100% 62% / 0.5));
}
.text-effect::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle 2.9em at 50% 46%, hsl(40 100% 62% / 0.5) 0%, hsl(340 96% 58% / 0.3) 40%, transparent 66%),
    radial-gradient(54% 6% at 50% 46%, hsl(328 100% 66%) 0%, hsl(328 100% 66% / 0.32) 42%, transparent 76%),
    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; }
}

Related 3D & Depth effects

• 3D Extrude
• Isometric 3D
• Long Shadow
• Retro 3D
• Paper Cutout