← Back to Skills / Marketplace / vaporwave
SKL · 21PRO

Vaporwave.

Hot pinks and electric purples bleeding into dark backgrounds, Roman busts in digital space, the dreamy aesthetic of a memory that never actually happened.

UNLOCK WITH PRO →
● Live preview · Vaporwave demo
This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

Vaporwave is the internet's most distinctive homegrown art movement — a dreamy, nostalgic reimagining of 80s and 90s consumer culture filtered through mall music, Japanese city pop, and the aesthetic of the early internet. Hot pinks and electric purples bleeding into each other over dark backgrounds, Roman busts floating in grid-lined space, a feeling that's somehow both melancholic and euphoric at the same time. As a UI aesthetic, it's immediately recognizable, wildly shareable, and impossible to confuse with anything else.

● Looks Like
Macintosh Plus album artOutrun game aestheticsSynthwave concert visualsRetrowave music visualizersThe most-screenshotted corners of Tumblr circa 2013Any aesthetic described simply as "aesthetic"
02 · Best For / Avoid If
＋ Best For
+Music apps, DJ tools, and audio experiences
+Creative portfolios with strong aesthetic identity
+Consumer apps for entertainment and culture
+Brands where nostalgia and dreaming are core emotional themes
+Side projects and personal tools where the vibe is literally the whole point
+Anything targeting an audience that already knows and loves this aesthetic
× Avoid If
×You need your product to age well — vaporwave is powerfully of its moment
×Your users are professionals who need clarity and precision over atmosphere
×Your interface has real data density — vaporwave backgrounds compete hard with content
×Your product is in any serious or regulated industry
03 · Design Philosophy
01

The gradient is the environment

Vaporwave interfaces don't have backgrounds — they have environments. Deep magenta bleeding into dark purple bleeding into electric blue, rendered as smooth gradients that suggest depth, sunset, and infinite horizon. The gradient doesn't sit behind the content; it establishes the entire emotional register of the experience before a single element appears.

02

Nostalgia through anachronism

The emotional power of vaporwave comes from colliding time periods: Roman statues in digital spaces, cassette tapes next to laser grids, 70s serif fonts next to 90s pixel type. This deliberate mismatch creates a dreamlike quality — familiar things in unfamiliar combinations that feel like a memory of something that never actually happened.

03

Chrome and neon are the materials

Where other styles use flat color and clean borders, vaporwave uses chrome — reflective gradients on type and objects that simulate metallic surfaces — and neon, glowing edges that bleed light into the surrounding darkness. These material qualities give vaporwave a physical presence that flat design deliberately avoids. Everything looks like it could be a prop in a music video.

04 · Use With Claude / Cursor
Claude
01Open your Claude project
02Click 'Add files' in the Project Knowledge panel
03Drop in SKILL.md and DESIGN.md
04Start a new chat in the project — Claude follows the spec
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — Cursor references both files per request
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Unreadable text on gradient backgrounds
Hot pink text on a purple-to-blue gradient is beautiful and completely illegible. All body text needs a semi-transparent dark overlay or a solid dark surface under it — never directly on the gradient.
! WARNING
Gradient overload
When every element has its own gradient, the screen becomes a blur with no focal point. Keep the gradient on the background and one or two hero elements; everything else stays clean and flat.
! WARNING
Commitment issues
Vaporwave works when it's made with genuine affection for the aesthetic. Half-hearted execution looks like you're embarrassed by it. If you're going to do it, go all the way.
! WARNING
Glow effects on small text
Chrome and neon treatments on small type turn into muddy, unreadable noise. Reserve the metallic and glow effects for display-sized type and large UI elements only.
● 07 · Download

Two files. That's it.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →