1.10 · Aesthetic

Cyberpunk / Synthwave.

Neon grid horizon, sunset gradient sky, glitched serif type, HUD overlays. The 80s-future revival that game studios and dev tools love.

What it is

Synthwave (a sub-genre of cyberpunk aesthetics) borrows directly from 1980s VHS box-art, retro arcade games, and Tron — neon pink-and-cyan grids receding into a horizon, a stylized sun behind layered mountains, chrome-or-glow type. Cyberpunk extends it with HUD-like overlay chrome (corner brackets, monospace status text, scanlines). Used for game studios, hackathons, NFT projects, and any product that wants to feel "from the future, but a future that already happened."

How it works

The receding floor grid is a flat element with a magenta line pattern rotated using transform: rotateX(60deg) in a perspective container — that single CSS trick gives the iconic 3D vanishing-point effect. The "sun" is a circle with a pink-to-amber vertical gradient, partially covered by horizontal stripes (mask + repeating-linear-gradient). Mountain silhouettes are conic-gradient triangles in front of the sun. Stars are a stack of small radial-gradients in the sky area. Type uses Orbitron (geometric) for the headline and VT323 (pixel) for HUD text, both with text-shadow neon glow.

perspective + rotateXContainer has perspective:360px, grid rotates 60deg on X — creates vanishing-point floor
conic-gradient trianglesMountain silhouettes built without SVG or images
Neon text-shadowMulti-layer text-shadow: small magenta + larger cyan glow + offset cyan stroke
VT323 / OrbitronFree Google fonts that nail the retro-future feel

Live demo

Live · animated grid
SYS_STATUS // ONLINE
VER_4.0.42
FPS // 60.00
NEON_GRID // READY
★ NEW DROP — 24.05.30

The neon
future is here.

// run the demo. log in to the grid. //

ENTER →

Copy this prompt

Prompt · 1.10 Cyberpunk / Synthwave
Build a synthwave / cyberpunk hero section. Background: vertical gradient from deep purple #0a0420 to magenta #fd1d7c to amber #ffb800 (top to bottom). Import Orbitron and VT323 from Google Fonts. Build the iconic vanishing-point floor grid: a div at bottom 38% of the screen with perspective:360px, containing a child grid built from two repeating linear-gradients (magenta lines), rotated transform:rotateX(60deg) so it recedes to the horizon. Animate the grid translating slowly to simulate motion. Add a "sun": a centered circle (260px) with a vertical gradient (white → amber → magenta → purple) and horizontal stripe lines carved into the bottom half via mask + repeating-linear-gradient. Place black conic-gradient triangle mountains in front of the sun. Scatter small radial-gradient star dots across the sky. Headline in Orbitron 900, uppercase, with neon multi-layer text-shadow (magenta inner glow + cyan offset). HUD overlay text in VT323 font at four corners showing fake status strings ("SYS_STATUS // ONLINE", "FPS // 60.00"). CTA button: hot pink gradient with 2px cyan border and a cyan offset box-shadow.

Example sites to study