Synthwave 合成波（Synthwave / Outrun）
Synthwave is the cinematic, heroic nostalgia of 1980s action-movie futurism rendered as UI: a near-black highway at night lit by neon magenta, hot pink, and cyan, with a chrome-gradient sun sinking behind an infinite perspective grid. Where vaporwave remixes the 80s as an ironic, decayed collage, synthwave plays it straight — glossy, driving, and soundtrack-ready. It borrows its palette from arcade marquees and movie posters, then polishes it into sunset gradients, mirrored chrome type, and glowing grid floors.
合成波是把 80 年代动作片未来主义渲染成 UI 的、充满电影感的英雄式怀旧：一条深夜公路，被霓虹品红、热粉和青色照亮，镀铬渐变的夕阳沉在无限延伸的透视网格后方。蒸汽波把 80 年代 remix 成讽刺、磨损的拼贴，合成波却把它演得正正经经 —— 光泽、推进感、像配乐已经响起来。它的配色借自街机招牌和电影海报，再被抛光成日落渐变、镜面铬字和发光的网格地面。
Scope: This entry covers the visual style known as synthwave, outrun, or retrowave — dark, neon-lit 80s futurism. The closely related microgenre that shares the sunset grid but adds VHS wear, Greek busts, and Windows 95 consumer debris is Vaporwave (its own entry); the dark-neon dystopian HUD cousin is Cyberpunk.
范围：本条覆盖 Synthwave / Outrun / Retrowave 这套视觉风格 —— 暗色、霓虹灯照亮的 80 年代未来主义。共享夕阳网格但加上 VHS 磨损、希腊雕像和 Windows 95 消费碎片的近亲是蒸汽波（另见该条）；暗黑霓虹反乌托邦 HUD 表亲则是赛博朋克。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Neon on a dark highway canvas暗夜公路底上的霓虹 color defining定义特征
Backgrounds sit at #0b0414 to #1a0b2e; accents are saturated magenta #ff00a0, hot pink #ff2a6d, electric cyan #05d9e8, and sunset orange #ff9e42. Light or pastel grounds disqualify the style.
背景落在 #0b0414 到 #1a0b2e 之间；强调色是饱和品红 #ff00a0、热粉 #ff2a6d、电光青 #05d9e8 和日落橙 #ff9e42。浅色或粉彩底色会一眼 disqualify 这个风格。
-
Striped sun over perspective grid条纹夕阳与透视网格 imagery defining定义特征
A setting sun with horizontal banding sits above a perspective grid floor that converges toward the horizon; the grid glows in cyan or magenta and reads as an endless road or digital plain.
一颗带水平条纹的落日悬在地平线上方，下方是向远方汇聚的透视网格地面；网格发出青色或品红光，读起来像无尽公路或数字平原。
-
Chrome and sunset gradients铬金属与日落渐变 surface defining定义特征
Panels, type, and highlights use mirror-chrome gradients (#e0e0e0 → #8a8a8a → #ffffff → #707070) or sunset fades (deep purple → hot pink → orange → cyan); surfaces are glossy, not matte or worn.
面板、字体和高光使用镜面铬渐变（#e0e0e0 → #8a8a8a → #ffffff → #707070）或日落渐变（深紫 → 热粉 → 橙 → 青）；表面是光泽的，而非哑光或磨损。
-
Glowing neon hairlines发光的霓虹发丝线 surface defining定义特征
Borders, grid lines, and buttons carry 1–2px bright strokes with bloom — box-shadow: 0 0 8px and 0 0 24px in the stroke color — so edges read as light tubes rather than solid panels.
边框、网格线和按钮使用 1–2px 的亮色描边并带辉光 —— box-shadow: 0 0 8px 和 0 0 24px 的同色光晕 —— 让边缘读起来像灯管，而不是实心面板。
-
Italic techno display type斜体科技展示字体 typography supporting辅助特征
Headings use slanted, compressed sans or squared techno faces in uppercase, often with chrome fill and neon outlines; letter-spacing is wide at .08–.18em, evoking movie titles and arcade logos.
标题使用倾斜的压缩无衬线或方体科技字体，全大写，字间距 .08–.18em，常带铬填充和霓虹描边；让人想起电影片名和街机 logo。
-
Smooth driving motion推进感平滑动效 motion supporting辅助特征
Animation feels like forward momentum: grid lines scroll toward the viewer, the sun pulses slowly, and glows breathe in long 2–4s loops — smooth and propulsive, never stuttering or glitching.
动画感觉是向前冲的动量：网格线朝观者方向滚动，太阳缓慢脉动，辉光以 2–4 秒长循环呼吸 —— 顺滑而推进，绝不卡顿或故障。
-
Palm tree and horizon silhouettes棕榈树与地平线剪影 imagery variable可变特征
Black palm fronds, mountain ridges, or city skylines frame the sunset; density varies from a single horizon line to a full poster composition.
黑色的棕榈叶、山脊或城市天际线框住日落；疏密可变，从单条地平线到完整海报构图。
-
VHS decay and consumer collageVHS 磨损与消费拼贴 surface avoid避免
Scanlines, tracking bands, Greek busts, katakana decoration, and Windows 95 chrome are vaporwave's sampled nostalgia — synthwave renders the era, it does not sample its debris.
扫描线、磁迹纹、希腊雕像、片假名装饰和 Windows 95 边框都是蒸汽波的采样式怀旧 —— 合成波是渲染那个时代，而不是采样它的残骸。
Often confused with: Vaporwave最容易混淆：蒸汽波（Vaporwave）
Synthwave合成波（Synthwave / Outrun）
Vaporwave蒸汽波（Vaporwave）
This is synthwave because it renders the 1980s as a polished, cinematic hero shot: near-black canvas, neon magenta/cyan, chrome-gradient sun, infinite grid floor, and a driving forward motion — nostalgia played straight, not sampled and degraded.
这是合成波，因为它把 80 年代渲染成一幅抛光的电影英雄镜头：近黑底色、霓虹品红/青、铬渐变太阳、无限网格地面和向前的推进感 —— 怀旧被正正经经地演绎，而不是被采样并做旧。
It would become vaporwave if the palette washed to pastel pink-to-cyan, Greek marble busts and Windows 95 dialog boxes appeared, VHS scanlines and chromatic aberration took over, and the mood turned dreamy, ironic collage instead of heroic soundtrack.
如果配色被洗成粉到青的粉彩、希腊大理石雕像和 Windows 95 对话框出现、VHS 扫描线和色差接管画面、气质从英雄式配乐变成梦幻讽刺的拼贴 —— 就变成蒸汽波了。
In code — optional starting points代码写法 —— 可选起点
Synthwave sunset background with grid floor
background:
linear-gradient(180deg, #0b0414 0%, #1a0b2e 45%, #2d0b4e 70%, #ff2a6d 88%, #ff9e42 100%);
background-attachment: fixed;Glowing neon grid floor
.grid {
background:
linear-gradient(90deg, rgba(5,217,232,.35) 1px, transparent 1px),
linear-gradient(180deg, rgba(5,217,232,.35) 1px, transparent 1px);
background-size: 40px 40px;
transform: perspective(240px) rotateX(60deg);
box-shadow: 0 0 40px rgba(5,217,232,.25);
}Chrome 3D display type
.chrome {
background: linear-gradient(180deg, #fff 0%, #a0a0a0 45%, #fff 55%, #707070 100%);
-webkit-background-clip: text;
color: transparent;
text-shadow: 0 2px 0 #4a1a6b, 0 4px 0 #2d0b4e, 0 0 18px rgba(255,42,109,.6);
}Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the UI in Synthwave. Canvas: dark highway night — page background #0b0414 to #1a0b2e, panels at #120624 with 1px neon borders. Accent palette: magenta #ff00a0, hot pink #ff2a6d, electric cyan #05d9e8, sunset orange #ff9e42, and deep purple #2d0b4e. Hero imagery: a horizontal-banded sun (#ff9e42 → #ff2a6d → #b967ff) sitting over a perspective grid floor converging to the horizon; grid lines in cyan at 1px with glow (box-shadow: 0 0 8px rgba(5,217,232,.55), 0 0 24px rgba(5,217,232,.25)). Type: italic compressed sans or squared techno, uppercase, letter-spacing .12em; headings use chrome gradient fill (background: linear-gradient(180deg, #fff 0%, #a0a0a0 45%, #fff 55%, #707070 100%) with -webkit-background-clip: text) plus neon text-shadow. Buttons and sliders: dark glossy fills with neon 1px borders and bloom; active states pulse. Motion: smooth 2–4s loops — grid advances, sun pulses, glows breathe; no glitch, no scanlines, no tape noise. Add optional black palm silhouettes against the sunset. Avoid VHS decay, Greek busts, katakana, Windows 95 chrome, and pastel washes — those are Vaporwave. Keep body text on solid dark plates; neon glows are decoration, not readable text.
用合成波（Synthwave）创建这个界面。画布：深夜公路 —— 页面背景 #0b0414 到 #1a0b2e，面板用 #120624，配 1px 霓虹边框。强调色：品红 #ff00a0、热粉 #ff2a6d、电光青 #05d9e8、日落橙 #ff9e42、深紫 #2d0b4e。主视觉：一颗水平条纹的太阳（#ff9e42 → #ff2a6d → #b967ff）悬在向地平线汇聚的透视网格地面上；网格线用 1px 青色并带辉光（box-shadow: 0 0 8px rgba(5,217,232,.55), 0 0 24px rgba(5,217,232,.25)）。字体：倾斜压缩无衬线或方体科技字体，全大写，字间距 .12em；标题用铬渐变填充（background: linear-gradient(180deg, #fff 0%, #a0a0a0 45%, #fff 55%, #707070 100%) 配合 -webkit-background-clip: text）加霓虹 text-shadow。按钮和滑块：暗色光泽填充 + 霓虹 1px 边框 + 辉光；激活态脉动。动效：2–4 秒平滑循环 —— 网格前进、太阳脉动、辉光呼吸；不要故障、不要扫描线、不要磁带噪点。可选黑色棕榈剪影衬托日落。避免 VHS 磨损、希腊雕像、片假名、Windows 95 边框和粉彩晕染 —— 那些是蒸汽波。正文放在实色暗底板上；霓虹辉光是装饰，不是可读文字。
Accessibility & misuse可访问性与误用
Neon glow on dark is tempting but not automatically readable: cyan #05d9e8 on #0b0414 clears 4.5:1, but magenta #ff00a0 and sunset orange #ff9e42 can fall short at small sizes. Keep body labels on solid dark plates (#120624 or #1a0b2e) with off-white #f0e6ff text, and use neon only for icons, borders, and decorative headlines.
暗黑底上的霓虹很诱人，但并不自动可读：青 #05d9e8 在 #0b0414 上能过 4.5:1，但品红 #ff00a0 和日落橙 #ff9e42 在小字号下可能不够。正文标签放在实色暗底板（#120624 或 #1a0b2e）上，用米白 #f0e6ff 显示；霓虹只用于图标、边框和装饰性标题。
Smooth driving motion and pulsing glows are generally gentle, but a scrolling perspective grid can trigger vestibular discomfort. Honor prefers-reduced-motion by freezing the grid advance and sun pulse; keep any flashes or pulses under 3 per second.
推进式平滑动效和缓慢脉动通常较温和，但滚动的透视网格可能诱发前庭不适。在 prefers-reduced-motion 下冻结网格前进和太阳脉动；任何闪烁或脉动控制在每秒 3 次以内。
Chrome-gradient and neon-outline type is decorative first: do not rely on it for navigation labels or status text. Provide a plain, high-contrast fallback for any content a user must read, and ensure focus indicators are visible against the dark canvas with an outline in a reserved color such as #05d9e8.
铬渐变和霓虹描边字体首先是装饰：不要依赖它们承载导航标签或状态文字。对必须阅读的内容提供普通高对比度降级，并确保焦点指示器在暗底上可见，使用保留色如 #05d9e8 描边。
Origin起源
Synthwave emerged in the mid-to-late 2000s as a music microgenre and visual aesthetic, with French acts such as Kavinsky and Justice helping shape its neon-drenched, 1980s soundtrack sound, and the 2011 film Drive — scored by Cliff Martinez with music from Kavinsky, College, and Chromatics — pushing the look into mainstream culture. The term 'outrun' comes from Kavinsky's 2013 album OutRun, whose cover art (a red Testarossa against a neon grid sunset) became a template. Visually, the style draws from 1980s film posters, arcade cabinets, and the light-cycle sequences of Tron (1982), polished into a cohesive digital aesthetic through Tumblr and Instagram communities in the 2010s.
合成波在 2000 年代中后期作为音乐微流派和视觉美学出现，法国音乐人 Kavinsky 和 Justice 帮助塑造了这种霓虹浸透的 80 年代配乐之声；2011 年电影《亡命驾驶》（Drive）—— 由 Cliff Martinez 配乐，并收录 Kavinsky、College 和 Chromatics 的作品 —— 把这套视觉推入主流文化。'Outrun' 一词来自 Kavinsky 2013 年专辑《OutRun》，其封面（一辆红色 Testarossa 停在霓虹网格夕阳前）成为模板。视觉上，该风格取自 80 年代电影海报、街机机台和《创》（Tron，1982）的光轮场景，并在 2010 年代通过 Tumblr 和 Instagram 社群被抛光成一套连贯的数字美学。