Synthorane
Midnight Highway — Kavell Drive
Neon Nights show · until 11 pm
DistortionFree
Synthwave Scene
A pure-CSS synthwave landscape: violet sky, striped sun, neon title and a pink grid floor rolling towards you under twinkling stars.
Updated
RETRO
Hover or click the scene to interact
This effect is free — the Distortion category contains 31 effects total, including 5 free. Effect.Labs has 840 vanilla effects. Explore the category →
Usage examples
Agendrelle · this week
4 events near you
- Thu12 Jazz brunch on the bargeWillow Quay · 11 am €18
-
Fri13 Arcade night · free playThe Pixel Cellar · 9 pm €12
- Sat14 Pottery workshop for beginnersThe Clay Workshop · 2 pm €35
- Sun15 Forest walk with a botanistNorth gate · 10 am Free
Velorquin · lap 3 / 31:42.37
Finish!
Time1:42.37
Position2nd / 8
Best lap0:33.10
How it works
The .swv-scene (300×200 px, 12 px corners) is painted with a vertical gradient: violet night at the top, a pink #ff006e horizon line halfway down, near-black ground below. The .swv-sun (80 px) goes from orange to pink to violet; a clip-path cuts two horizontal bands out of it.
The .swv-grid floor stacks three gradients: a bright centre line, vertical lines every 10% and horizontal lines every 21 px. Laid down by perspective(200px) rotateX(60deg), it recedes to the horizon. The swvGrid animation shifts the horizontal lines by 21 px every 2 seconds, in a loop, so the floor seems to move towards you endlessly.
Eight 2 px stars (.swv-stars span) go from 30% to 100% opacity over 3 seconds, each with its own delay. The .swv-text word ("RETRO") is set in capitals, with a cyan-to-magenta gradient clipped to the letters and a double glow. Repair: classes and animations now carry the swv- prefix; the old twinkle animation clashed with another effect in the catalogue.
Accessibility
- Real text: the title is HTML text that reads normally; the sun, stars and floor are hidden from screen readers (
aria-hidden="true"). - Reduced motion: with
prefers-reduced-motion: reducethe floor stops and the stars stay lit at 80%; the landscape stays complete (measured: 9 looping animations → 0 per copy). - No flashing: the twinkle affects 2 px dots over 3 seconds, far below the threshold for harmful flashes.
- Contrast: the title gradient runs from cyan (15.8:1 on the dark background) to magenta (6.3:1); it stays readable from about 18 px.
- No interaction: nothing reacts to hover, click or keyboard.
Browser compatibility
CSS only, no JavaScript. Measured in Chromium 151 and Firefox 153: 0 errors, two independent copies, nothing overflowing at 390 px, animations stopped under reduced motion. In Playwright's WebKit 26.5 the perspective floor shows tilted and shortened (before and after the repair); since that tool is unreliable for CSS 3D, the floor rendering is not verified for Safari.
Chrome 55+✓ Full (measured)
Firefox 54+✓ Full (measured)
Safari 9.1+✓ Not verified for the perspective floor (sky, sun, title and stars measured in WebKit)
Edge 79+✓ Full (Chromium engine)
Safari iOS 9.3+✓ Not verified for the perspective floor
Chrome Android 55+✓ Full (Chromium engine)
Without clip-path the sun is a solid disc with no bands; without background clipping to text the title turns invisible, so keep the -webkit-background-clip: text line.
The code
Copy the two blocks (HTML and CSS) into your page. No JavaScript, no dependencies.
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
Pure CSS — no JavaScript needed.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
--swv-w and --swv-scene-h |
300px and 200px |
Landscape size; 100% to fill its container (never wider than it). |
--swv-h |
280px |
Root height; 100% or auto to fit your layout. |
--swv-sun |
80px |
Sun diameter. |
--swv-font |
20px |
Title size ("RETRO" in the HTML, replace it with your text). |
--swv-speed |
2s |
Time for the floor to move by one line: shorter means faster. |
--swv-depth |
200px |
Floor perspective: larger on a big scene to keep the lines even. |
--swv-sky, --swv-sun-colors, --swv-text-colors |
violet/pink, orange/pink/violet, cyan/magenta gradients | The three gradients of the sky, the sun and the title. |
--swv-glow, --swv-line, --swv-line-strong |
#ff006e, pink at 30% and 40% |
Colour of the floor's centre line and of the grid lines. |
--swv-bg and --swv-radius |
rgb(10,10,15) and 12px |
Root background and landscape corner rounding. |
FAQ
Can I use my own text instead of "RETRO"?
Yes, it is text inside .swv-text. The CSS shows it in capitals; adjust --swv-font if the word is longer.
How can the landscape fill a whole hero?
Set --swv-w, --swv-scene-h and --swv-h to 100%, use --swv-radius: 0, then enlarge the sun, the title and the floor perspective to keep the proportions.
Why is there a square halo around the sun?
The clip-path that cuts the bands also cuts the sun's glow (box-shadow) at the edge of its square: the glow only shows in the four corners around the disc, which draws a square. For a sun without a halo, remove the box-shadow from .swv-sun.
