Synthorane
Autoroute de minuit — Kavell Drive
Émission Nuits néon · jusqu'à 23 h
DistorsionGratuit
Synthwave Scene
Un paysage synthwave en CSS pur : ciel violet, soleil rayé, titre néon et sol quadrillé rose qui défile vers vous sous des étoiles qui scintillent.
Mis à jour le
RETRO
Survolez ou cliquez la scène pour interagir
Cet effet est gratuit — la catégorie Distorsion en contient 31 au total, dont 5 gratuits. Effect.Labs regroupe 840 effets vanilla. Découvrir la catégorie →
Exemples d'usage
Agendrelle · cette semaine
4 sorties près de chez vous
- Jeu12 Brunch jazz sur la pénicheQuai des Saules · 11 h 18 €
-
Ven13 Nuit arcade · parties illimitéesLa Cave à pixels · 21 h 12 €
- Sam14 Atelier poterie pour débutantsL'Atelier d'argile · 14 h 35 €
- Dim15 Balade en forêt avec une botanistePorte nord · 10 h Gratuit
Velorquin · tour 3 / 31:42.37
Arrivée !
Temps1:42.37
Position2e / 8
Meilleur tour0:33.10
Comment ça marche
La scène .swv-scene (300×200 px, coins de 12 px) est peinte d'un dégradé vertical : nuit violette en haut, ligne d'horizon rose #ff006e à mi-hauteur, sol presque noir dessous. Le soleil .swv-sun (80 px) passe de l'orange au rose puis au violet ; un clip-path y découpe deux bandes horizontales.
Le sol .swv-grid superpose trois dégradés : une ligne centrale vive, des lignes verticales tous les 10 % et des lignes horizontales tous les 21 px. Couché par perspective(200px) rotateX(60deg), il fuit vers l'horizon. L'animation swvGrid décale les lignes horizontales de 21 px en 2 secondes, en boucle : le sol semble avancer vers vous sans fin.
Huit étoiles de 2 px (.swv-stars span) passent de 30 % à 100 % d'opacité en 3 secondes, chacune avec son propre décalage. Le mot .swv-text (« RETRO ») est écrit en majuscules, avec un dégradé cyan-magenta découpé dans les lettres et une double lueur. Réparation : les classes et animations ont été préfixées (swv-) ; l'ancienne animation twinkle entrait en conflit avec un autre effet du catalogue.
Accessibilité
- Texte réel : le titre est du texte HTML, lu normalement ; le soleil, les étoiles et le sol sont masqués aux lecteurs d'écran (
aria-hidden="true"). - Mouvement réduit : avec
prefers-reduced-motion: reduce, le sol s'arrête et les étoiles restent allumées à 80 % ; le paysage reste complet (mesuré : 9 animations en boucle → 0 par copie). - Pas de clignotement : le scintillement concerne des points de 2 px sur 3 secondes, très loin du seuil des flashs dangereux.
- Contraste : le dégradé du titre va du cyan (15,8:1 sur fond sombre) au magenta (6,3:1) ; il reste lisible à partir de 18 px environ.
- Aucune interaction : rien ne réagit au survol, au clic ni au clavier.
Compatibilité navigateur
CSS seul, aucun JavaScript. Mesuré dans Chromium 151 et Firefox 153 : 0 erreur, deux copies indépendantes, rien qui déborde à 390 px, animations arrêtées en mouvement réduit. Dans le WebKit 26.5 de Playwright, le sol en perspective s'affiche penché et raccourci (avant comme après réparation) ; cet outil n'étant pas fiable pour la 3D CSS, le rendu du sol n'est pas vérifié pour Safari.
Chrome 55+✓ Complet (mesuré)
Firefox 54+✓ Complet (mesuré)
Safari 9.1+✓ Non vérifié pour le sol en perspective (ciel, soleil, titre et étoiles mesurés dans WebKit)
Edge 79+✓ Complet (moteur Chromium)
Safari iOS 9.3+✓ Non vérifié pour le sol en perspective
Chrome Android 55+✓ Complet (moteur Chromium)
Sans clip-path, le soleil est un disque plein, sans bandes ; sans découpe du texte par le fond, le titre devient invisible : gardez la ligne -webkit-background-clip: text.
Le code
Copiez les deux blocs (HTML et CSS) dans votre page. Aucun JavaScript, aucune dépendance.
HTML
<div class="fx-0280-root">
<div class="swv-scene">
<div class="swv-stars" aria-hidden="true">
<span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span>
</div>
<div class="swv-sun" aria-hidden="true"></div>
<div class="swv-text">RETRO</div>
<div class="swv-grid" aria-hidden="true"></div>
</div>
</div>
CSS
.fx-0280-root,.fx-0280-root *,.fx-0280-root *::before,.fx-0280-root *::after{box-sizing:border-box}
.fx-0280-root{--swv-w:300px;--swv-scene-h:200px;--swv-radius:12px;--swv-sky:linear-gradient(180deg,#0a001a 0%,#1a0033 30%,#2d004d 50%,#ff006e 51%,#ff006e 52%,#0a001a 52%);--swv-sun:80px;--swv-sun-colors:linear-gradient(180deg,#ff9900,#ff006e,#cc00ff);--swv-glow:#ff006e;--swv-line:rgba(255,0,110,.3);--swv-line-strong:rgba(255,0,110,.4);--swv-depth:200px;--swv-speed:2s;--swv-font:20px;--swv-text-colors:linear-gradient(180deg,#00ffff,#ff00ff);--swv-bg:rgb(10,10,15);--swv-h:280px;display:flex;align-items:center;justify-content:center;width:100%;height:var(--swv-h);overflow:hidden;position:relative;background:var(--swv-bg);color:rgb(255,255,255);font-family:sans-serif}
.fx-0280-root .swv-scene{width:var(--swv-w);height:var(--swv-scene-h);max-width:100%;background:var(--swv-sky);border-radius:var(--swv-radius);position:relative;overflow:hidden}
.fx-0280-root .swv-sun{position:absolute;width:var(--swv-sun);height:var(--swv-sun);background:var(--swv-sun-colors);border-radius:50%;top:20%;left:50%;transform:translateX(-50%);box-shadow:0 0 40px var(--swv-glow),0 0 80px color-mix(in srgb,var(--swv-glow) 40%,transparent);clip-path:polygon(0 0,100% 0,100% 40%,0 40%,0 45%,100% 45%,100% 55%,0 55%,0 60%,100% 60%,100% 100%,0 100%)}
.fx-0280-root .swv-grid{position:absolute;bottom:0;left:-50%;width:200%;height:48%;background:linear-gradient(90deg,transparent 0%,var(--swv-line) 49.5%,var(--swv-glow) 50%,var(--swv-line) 50.5%,transparent 100%),repeating-linear-gradient(90deg,transparent,transparent calc(10% - 1px),var(--swv-line-strong) calc(10% - 1px),var(--swv-line-strong) 10%),repeating-linear-gradient(0deg,transparent,transparent 20px,var(--swv-line) 20px,var(--swv-line) 21px);transform:perspective(var(--swv-depth)) rotateX(60deg);transform-origin:center top;animation:swvGrid var(--swv-speed) linear infinite}
.fx-0280-root .swv-text{position:absolute;top:8%;width:100%;text-align:center;font-family:'Inter',sans-serif;font-weight:900;font-size:var(--swv-font);letter-spacing:4px;text-transform:uppercase;background:var(--swv-text-colors);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 10px #ff00ff) drop-shadow(0 0 20px #00ffff)}
.fx-0280-root .swv-stars{position:absolute;top:0;left:0;width:100%;height:52%;overflow:hidden}
.fx-0280-root .swv-stars span{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:swvTwinkle 3s ease-in-out infinite}
.fx-0280-root .swv-stars span:nth-child(1){top:10%;left:15%;animation-delay:0s}
.fx-0280-root .swv-stars span:nth-child(2){top:20%;left:75%;animation-delay:.7s}
.fx-0280-root .swv-stars span:nth-child(3){top:5%;left:45%;animation-delay:1.2s}
.fx-0280-root .swv-stars span:nth-child(4){top:30%;left:85%;animation-delay:.3s}
.fx-0280-root .swv-stars span:nth-child(5){top:8%;left:60%;animation-delay:1.8s}
.fx-0280-root .swv-stars span:nth-child(6){top:25%;left:25%;animation-delay:2.1s}
.fx-0280-root .swv-stars span:nth-child(7){top:15%;left:90%;animation-delay:.9s}
.fx-0280-root .swv-stars span:nth-child(8){top:35%;left:10%;animation-delay:1.5s}
@keyframes swvGrid{0%{background-position-y:0}to{background-position-y:21px}}
@keyframes swvTwinkle{0%,to{opacity:.3}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.fx-0280-root .swv-grid{animation:none}.fx-0280-root .swv-stars span{animation:none;opacity:.8}}
JavaScript
CSS pur — aucun JavaScript requis.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
--swv-w et --swv-scene-h |
300px et 200px |
Taille du paysage ; 100% pour remplir son conteneur (jamais plus large que lui). |
--swv-h |
280px |
Hauteur de la racine ; 100% ou auto pour l'intégrer à votre mise en page. |
--swv-sun |
80px |
Diamètre du soleil. |
--swv-font |
20px |
Taille du titre (« RETRO » dans le HTML, à remplacer par votre texte). |
--swv-speed |
2s |
Temps pour que le sol avance d'une ligne : plus court, il défile plus vite. |
--swv-depth |
200px |
Perspective du sol : plus grande sur une grande scène pour garder des lignes régulières. |
--swv-sky, --swv-sun-colors, --swv-text-colors |
dégradés violet/rose, orange/rose/violet, cyan/magenta | Les trois dégradés du ciel, du soleil et du titre. |
--swv-glow, --swv-line, --swv-line-strong |
#ff006e, rose à 30 % et 40 % |
Couleur de la ligne centrale du sol et des lignes de la grille. |
--swv-bg et --swv-radius |
rgb(10,10,15) et 12px |
Fond de la racine et arrondi du paysage. |
FAQ
Peut-on mettre son propre texte à la place de « RETRO » ?
Oui, c'est du texte dans .swv-text. Il est affiché en majuscules par le CSS ; adaptez --swv-font si le mot est plus long.
Comment le paysage peut-il remplir tout un haut de page ?
Donnez 100% à --swv-w, --swv-scene-h et --swv-h, mettez --swv-radius: 0, puis agrandissez le soleil, le titre et la perspective du sol pour garder les proportions.
Pourquoi un halo carré apparaît-il autour du soleil ?
Le clip-path qui découpe les bandes coupe aussi la lueur du soleil (box-shadow) au bord de son carré : elle ne reste visible que dans les quatre coins, autour du disque, ce qui dessine un carré. Pour un soleil sans halo, retirez le box-shadow de .swv-sun.
