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

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

In vaporwave, the background is an environment. Deep magenta bleeding into dark purple bleeding into electric blue, rendered as smooth gradients that suggest depth, sunset, and infinite horizon. The gradient 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

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 makes every element feel like a tangible object. Everything looks like it could be a prop in a music video.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
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 — mention the skill name to invoke it automatically
★ 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

Beautiful designs in minutes.

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

UNLOCK WITH PRO →