La vaporwave est un genre musical né en 2011 sur Bandcamp qui n’aurait jamais dû devenir un langage visuel — et qui l’est devenu. En quinze ans, ses bustes romains, ses grilles 3D rose-violet et ses scanlines VHS ont quitté les pochettes d’album pour coloniser des sites de festivals, des marques gaming, des collections NFT et même des SaaS de niche. La synthwave, sa cousine plus optimiste, est devenue la bande-son officielle des Tesla et des trailers Netflix. Décortiquons leur grammaire visuelle, leurs usages légitimes et leurs vrais pièges techniques.
En résumé pour les pressés :
- Vaporwave : esthétique née en 2011 dans la musique (Macintosh Plus, James Ferraro), reprise en visuel autour de 2013. Codes : néon rose-violet, statues romaines, scanlines, polices japonaises décoratives.
- Synthwave (alias retrowave, outrun) : cousine plus dynamique, ancrée dans l’imaginaire 80s (Miami Vice, Tron, Drive). Codes : soleil pixelisé, grille 3D fuyante, néon plus saturé.
- Usages légitimes : musique électronique, gaming rétro, événementiel culturel, art numérique, NFT, marques streetwear.
- Pièges SEO : texte sur image, contraste accessibilité, polices décoratives illisibles en mobile, lourdeur des effets visuels.
- Reconstruction CSS possible sans images :
perspective+repeating-linear-gradientpour la grille,text-shadowmultiple pour le néon, scanlines via SVG pattern.
Qu’est-ce que la vaporwave ? La synthwave ?
Les deux esthétiques sont régulièrement confondues, et pour cause : elles partagent un lexique visuel (néon, grille 3D, 80s/90s) et une nostalgie commune. Elles divergent pourtant sur le ton. La vaporwave est mélancolique, ironique, post-capitaliste. Elle ressuscite les ambiances des malls américains désertés, des publicités Windows 95, des hôtels Floride sans clients. Sa palette typique : rose pastel #FF6AD5, cyan #94D0FF, violet sombre #2D1B69. Sa typographie de signature : caractères japonais hiragana/katakana décoratifs, polices Mac System des années 90.
La synthwave (aussi appelée retrowave ou outrun) est plus joyeuse, plus cinématographique. Elle célèbre les références positives des 80s : Miami Vice, Tron, Top Gun, plus tard Stranger Things. Sa palette pousse plus loin la saturation : néon magenta, cyan électrique, orange coucher de soleil. Sa typographie : polices à empattements géométriques fuyants, type Streamster, NEONOIR, ou en libre Audiowide et Monoton. Là où la vaporwave murmure une critique douce, la synthwave hurle un karaoké de victoire au volant d’une Lamborghini holographique.
Origine : musique 2011-2013, Macintosh Plus, esthétique mall
La vaporwave naît musicalement entre 2011 et 2013 dans la scène Bandcamp et SoundCloud. Trois pierres fondatrices : Far Side Virtual de James Ferraro (2011), Floral Shoppe de Macintosh Plus / Vektroid (2011) — dont la pochette au buste de statue rose-violet est devenue le visuel le plus iconique du mouvement — et Eccojams de Daniel Lopatin (2010). Cette musique ralentit et déforme des morceaux de variétés américaines des années 80, créant une sensation d’« hauntologie », terme du philosophe Mark Fisher pour désigner une nostalgie sans souvenir.
La traduction visuelle suit rapidement, portée par Tumblr en 2013-2015, puis Are.na et Instagram. La synthwave visuelle, elle, descend d’une autre filiation : du film Drive (2011) avec sa typographie rose, du jeu vidéo Hotline Miami (2012), puis de l’explosion Stranger Things (2016). Le générique de la série a réintroduit en mainstream la grille 3D fuyante et le néon, langage que la culture geek connaissait depuis Tron (1982) et Blade Runner (1982).
En 2026, les deux esthétiques sont entrées en pop culture stable : elles ne sont plus des sous-cultures, elles sont des préréglages. Adobe Express propose des templates synthwave. Canva a une catégorie vaporwave. Et c’est là que ça devient intéressant pour les marques : la grammaire est universellement lisible, à condition d’être citée avec finesse, pas plaquée.
Sept signes visuels qui identifient ces deux esthétiques
Voici les marqueurs partagés et divergents :
- Palette néon rose-violet-cyan : la vaporwave reste sur des pastels (#FF6AD5, #94D0FF). La synthwave pousse vers le saturé (#FF1493, #00FFFF, #FF6B35).
- Grille 3D fuyante : ligne d’horizon, grille perspective qui s’éloigne vers un soleil pixelisé. Marqueur synthwave par excellence.
- Scanlines et glitchs VHS : lignes horizontales semi-transparentes qui imitent les écrans CRT, parfois associées à des décalages chromatiques (chromatic aberration).
- Statues gréco-romaines : bustes ou colonnes en marbre, signature vaporwave, signifient l’écroulement de l’empire (capitalisme tardif, mall culture).
- Caractères japonais décoratifs : hiragana/katakana utilisés graphiquement (pas linguistiquement), souvent pour traduire littéralement le mot vaporwave en ヴェイパーウェイヴ.
- Soleil pixelisé fendu : disque de couleurs en dégradé orange-rose-mauve, parfois fendu de bandes, signature synthwave.
- Polices décoratives géométriques : Streamster, Audiowide, Monoton, NEONOIR, ou en alternative libre Major Mono Display, Iceberg, Bungee Inline.
Démonstration : la home NEWP en vaporwave
Nous avons appliqué la grammaire vaporwave/synthwave à notre propre page d’accueil pour matérialiser le résultat. Le but n’est pas d’en faire la version commerciale réelle de NEWP, mais de montrer comment un même contenu éditorial est métamorphosé par l’enveloppe visuelle.
Cette démonstration s’intègre dans notre guide complet des styles de webdesign, où chacun des vingt styles répertoriés est testé sur une même base éditoriale. La comparaison est éclairante : un même mot reçoit deux poids émotionnels radicalement opposés selon qu’il s’affiche en grille suisse austère ou en grille 3D synthwave.
Quand l’utiliser (musique, gaming, NFT, événementiel)
Les deux esthétiques fonctionnent quand le contenu vend une émotion plus qu’une information. Musique électronique, festivals techno, jeux vidéo rétro-pixel, NFT (en 2021-2023), art numérique, marques streetwear, salles d’arcade revival, podcasts geek, sites de DJs : tous ces univers consomment naturellement la grammaire vaporwave/synthwave et la décodent sans friction.
Les terrains contre-indiqués sont les mêmes que pour le Y2K : finance, juridique, santé, B2B industriel sérieux. Vous y signalez un manque de sérieux. Une variante existe pourtant : utiliser un seul élément synthwave (par exemple une grille 3D animée en background d’une section « Performance » d’un SaaS technique) peut donner une signature mémorable sans compromettre la crédibilité d’ensemble. Stripe et Linear ont déjà flirté avec ces codes en variantes pastel atténuées.
Comme le Y2K, ces esthétiques ont une durée de vie limitée. Un site full synthwave aujourd’hui aura un parfum daté dans trois à quatre ans. Notre recommandation tient : isolez-les dans des landings événementielles ou des micro-sites, gardez votre vitrine principale en langage plus pérenne. Pour un univers plus durable, voir notre analyse du dark mode premium, qui partage une partie du langage visuel sans la datation 80s assumée.
Vaporwave/synthwave et SEO : où sont les pièges
Le SEO d’un site vaporwave/synthwave est rarement un échec frontal, mais il accumule des handicaps qui plombent le score Lighthouse et le ranking. Quatre pièges récurrents :
- Texte sur image, et image qui clignote. Tentation de poser du headline sur une grille 3D animée. Résultat : Google ne lit pas le headline (texte fond animé = contraste fluctuant), et l’utilisateur non plus. Réservez le texte au-dessus d’une zone solide.
- Polices décoratives non subsettées. Une police synthwave téléchargée en 200 ko entière, alors qu’on n’utilise que 12 caractères, c’est un cauchemar pour le LCP. Subsetting obligatoire via
unicode-range. - Contraste accessibilité. Rose pastel sur fond violet pastel = ratio WCAG inférieur à 4.5:1. Vous perdez les utilisateurs malvoyants et un signal positif côté Google.
- Animations bloquantes. Une grille 3D animée en JavaScript qui tourne en boucle consomme du CPU et empêche le scroll fluide. Préférez CSS pur ou WebGL très optimisé.
Un audit perf bien mené sur un site synthwave moderne peut tout à fait afficher Lighthouse 88-95. Ce n’est pas le style qui pénalise, c’est l’exécution paresseuse.
Cinq univers emblématiques de la vaporwave/synthwave
Pour cartographier l’écosystème, voici cinq territoires où ces esthétiques règnent légitimement :
- Sites de festivals électroniques — Boiler Room (certaines éditions), Astropolis, Nuits Sonores. Le synthwave/vaporwave y est la langue native.
- Univers gaming rétro — Hotline Miami, Furi, FAR: Lone Sails. Les sites compagnon adoptent la grammaire visuelle des jeux.
- Plateformes NFT et crypto-art — Foundation, certaines collections OpenSea 2021-2022 ont massivement importé le langage vaporwave.
- Studios d’animation indépendants — sites portfolio de designers/animateurs publiant sur Vimeo, Behance, Are.na.
- Marques streetwear et collabs sneaker — drops capsule sur sites éphémères, particulièrement adidas Originals × certains labels Japonais.
Pour situer vaporwave/synthwave dans la généalogie complète des esthétiques rétro, voir notre analyse Y2K et notre guide Memphis et rétro 80s — ces trois familles se croisent, se citent et parfois se confondent.
Construire une scène vaporwave en CSS pur
Bonne nouvelle : aucun de ces effets ne nécessite d’images bitmap. Tout peut se construire en CSS et SVG pur, ce qui sauve à la fois la performance et la maintenabilité.
| Effet | Technique CSS | Notes |
|---|---|---|
| Grille 3D fuyante | perspective + transform: rotateX(60deg) sur repeating-linear-gradient | Animer avec @keyframes background-position |
| Néon glow | text-shadow empilés (3 à 5 ombres de tailles croissantes même teinte) | Ajoutez filter: blur(0.5px) pour adoucir |
| Scanlines VHS | SVG pattern de lignes horizontales en background avec mix-blend-mode: overlay | Restez sous 5 % opacité |
| Chromatic aberration | Trois copies du texte décalées en RGB avec filter: drop-shadow | Décalage 2-3px maximum |
| Soleil pixelisé | SVG avec gradient + clip-path strié horizontalement | Léger, animable |
| Polices décoratives | Audiowide, Monoton via Google Fonts (subsetting) | 1 seule famille par projet |
Quelques règles de dosage pour ne pas tomber dans la parodie : limitez les polices à une décorative pour les titres + une sans-serif lisible pour le corps. Réservez la grille 3D au hero ou à une seule section, jamais en background répété. Le néon glow brille sur fond sombre — ne tentez pas le néon sur fond clair.
Si vous portez un projet musical, gaming ou événementiel, nous pouvons vous accompagner sur la création de votre site internet en synthwave ou vaporwave moderne, avec un cadrage stratégique sur le dosage des effets, la performance et le SEO de fond.
FAQ — Vaporwave et synthwave en webdesign
Différence vaporwave et synthwave ?
La vaporwave est née comme genre musical en 2011 et porte une nostalgie mélancolique, ironique, post-capitaliste. Codes : pastels rose-cyan-violet, statues romaines, caractères japonais, scanlines, polices Mac System. La synthwave (aussi appelée retrowave) est plus dynamique, plus cinéma 80s. Codes : néon saturé, grille 3D fuyante, soleil pixelisé, polices géométriques type Audiowide.
Comment créer une grille 3D en CSS ?
Appliquez perspective: 600px au parent, puis sur l’élément grille transform: rotateX(60deg) avec un background: repeating-linear-gradient() qui dessine les lignes. Animez background-position-y en boucle infinie pour l’effet « vol au-dessus ». Tout est CSS pur, pas de WebGL nécessaire pour l’effet de base.
Vaporwave est-il toujours tendance en 2026 ?
La vaporwave a quitté le statut de tendance pour devenir un préréglage culturel stable. Elle n’est plus « à la mode », mais elle est devenue une grammaire visuelle reconnaissable et utilisable dans des contextes ciblés (musique, gaming, événementiel). En B2B grand public, c’est risqué et daté.
Quelles polices pour la vaporwave ?
Pour la vaporwave authentique : Chicago, Charcoal (polices Mac System années 90), ou en équivalents libres VT323, Press Start 2P. Pour la synthwave : Audiowide, Monoton, Major Mono Display, Streamster. Évitez de mélanger plus d’une police décorative — associez-la à une sans-serif lisible pour le corps.
Vaporwave et accessibilité ?
Risque réel. Le contraste rose pastel sur violet pastel est souvent inférieur au seuil WCAG 4.5:1. Solution : isolez tout le texte significatif au-dessus de zones de contraste suffisant, réservez les pastels aux éléments décoratifs. Désactivez systématiquement les animations (grille, néon clignotant) sous prefers-reduced-motion.
Combien coûte un site en synthwave ou vaporwave ?
Équivalent à une création standard, plus 10 à 25 % de production graphique additionnelle (SVG décoratifs, polices custom, animations CSS soignées). Pour une landing événementielle synthwave, comptez entre 6 000 et 14 000 euros selon ambition. Pour un site vitrine complet, entre 12 000 et 25 000 euros.
Conclusion
Vaporwave et synthwave ne sont pas des effets de mode passagers : ce sont des langages visuels stables, parfaitement adaptés à certaines niches culturelles, parfaitement déplacés ailleurs. La clé est moins de « savoir les faire » que de « savoir quand les choisir » — et de les exécuter techniquement avec rigueur pour ne pas sacrifier performance, accessibilité et SEO sur l’autel de l’ambiance. Pour comparer ces esthétiques aux dix-huit autres styles cartographiés sur le web actuel, retrouvez notre guide pilier complet.
Vous avez un projet ? Notre équipe étudie chaque brief avec une grille rigoureuse. Choisissez le scénario adapté à vos enjeux :
- Créer un nouveau site internet → — projet from scratch, du brief au lancement, intégrant le vaporwave/synthwave et le layout adaptés à votre marque
- Refondre un site existant → — repenser identité visuelle, architecture et performance d’un site qui ne convertit plus