Home / Cultural and Aesthetic / Vaporwave
Vaporwave CSS Template, Free with Live Demo
Free vaporwave website template for a synth music label. Pink and purple sky, a retro desktop window, a marble bust and a checker floor. Live demo. The example is Palm Mall FM, a synth music label.
What is vaporwave?
Vaporwave is a 2010s internet art style that remixes the 80s and 90s: pastel pink and purple skies, old computer windows, marble statues, palm trees and shopping mall music.
The desktop window copies classic 90s system buttons with light and dark borders. The checker floor is a repeating conic gradient tilted back, and the bust is a few rounded shapes with glowing shades.
Good for
- Synth and electronic music
- Streetwear and art drops
- Retro gaming and nostalgia sites
- Personal and fan pages
What you get in this template
- Pink to purple sunset sky
- Retro desktop window with a working playlist
- Checker floor made with repeating-conic-gradient
- Marble bust with glowing shades in CSS
- Monoton and VT323 retro fonts
The key CSS
This is the part that makes the vaporwave look work. Copy it into your own project.
.floor {
background: repeating-conic-gradient(#fff 0 25%, #1a0933 0 50%) 0 0 / 80px 80px;
transform: perspective(500px) rotateX(60deg);
}
.win {
background: #c0c0c0;
border: 2px solid; border-color: #fff #404040 #404040 #fff;
}
.tb { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; }How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
What is the vaporwave aesthetic?
It is a retro internet style with pastel neon colors, 90s computer graphics, Greek statues and a dreamy, ironic mood.
How do you make a checkerboard in CSS?
Use repeating-conic-gradient(#fff 0 25%, #000 0 50%) with a background-size for the square size.
How do I make a Windows 95 style button?
Give it a grey background and a 2px border that is light on the top and left and dark on the bottom and right. Swap them on :active.
More Cultural and Aesthetic designs
081. Japandi
Mado, a ceramics and homeware shop
082. Scandinavian
Fjell, cabin rentals in Norway
083. Cottagecore
Bramble and Bee, a farm jam shop
084. Dark Academia
Ravenhall, a reading society
086. Solarpunk
Sunroot, a community solar co-op
087. Bauhaus
Weimar Workshop, a design exhibition
088. Art Deco
The Gilded Lily, a cocktail bar
089. Islamic Geometric
Riad Zellige, a guesthouse in Marrakech