Holographic 全息彩虹箔(Holographic)
Holographic UI looks like light hitting rainbow foil: a metallic silver base explodes into shifting cyan, magenta, violet, and gold, with pastel pink and lavender shimmers sliding across the surface. It borrows from holographic foil printing and oil-slick diffraction, not glass or depth — the effect is flat, reflective, and synthetic. The style became the face of late-2010s unicorn branding, beauty-tech packaging, and year-in-review campaigns that wanted to feel futuristic and celebratory.
全息 UI 看起来像光打在彩虹箔上:金属银底会迸发出青、品红、紫、金等光谱色,粉彩的粉与薰衣草紫 shimmer 在表面滑动。它借自全息烫印和油渍衍射,而不是玻璃或纵深——效果是平面的、反射性的、合成的。这种外观成了 2010 年代末独角兽品牌、美妆科技和年度回顾视觉的招牌:既未来又喜庆。
Scope: This entry covers the digital visual style inspired by holographic foil and oil-slick iridescence. It is distinct from glassmorphism (which needs transparency and blur) and from the metallic-chrome Y2K look (which favors machined gradients and gel plastic rather than rainbow diffraction).
范围:本条覆盖受全息箔与油渍虹彩启发的数字视觉风格。它与玻璃拟态(依赖透明与模糊)和 Y2K 的金属铬感(偏好机械渐变与凝胶塑料,而非彩虹衍射)都不同。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Oil-slick rainbow gradients油渍彩虹渐变 color defining定义特征
The surface cycles through saturated spectral hues — cyan #00f2ea, magenta #ff006e, violet #b967ff, gold #ffd700 — usually via conic or multi-stop linear gradients that mimic light diffraction.
表面循环饱和光谱色——青 #00f2ea、品红 #ff006e、紫 #b967ff、金 #ffd700——通常用 conic-gradient 或多段线性渐变模拟光衍射。
-
Metallic silver foil base金属银箔底 surface defining定义特征
A bright neutral mirror-like substrate sits beneath the rainbow, rendered with sharp white #ffffff specular highlights and cool grey #c4cfdc mid-tones.
明亮的镜面中性底衬托在彩虹之下,用锐利的白 #ffffff 高光和冷灰 #c4cfdc 中间调表现。
-
Pastel pink-cyan shimmer粉彩粉青 shimmer color defining定义特征
Soft pastel overlights — pink #ffb3d9, lavender #c084fc, aqua #67e8f9 — float across the foil like secondary reflections, usually at 40–70% opacity.
柔和的粉彩叠光——粉 #ffb3d9、薰衣草紫 #c084fc、水蓝 #67e8f9——像二次反射浮在箔面上,通常不透明度 40–70%。
-
Hairline chrome edges发丝铬边 geometry supporting辅助特征
Borders and dividers are 1px metallic lines with a hard highlight on one side and a darker grey #8a93a3 on the other, mimicking a pressed foil edge.
边框和分隔线是 1px 金属线,一侧有硬高光,另一侧是深灰 #8a93a3,模仿压印箔边。
-
Slow sweeping sheen缓慢扫过的光泽 motion supporting辅助特征
A subtle animated gradient or white glare sweeps across the surface every 3–6 seconds, reinforcing the reflective foil illusion.
每 3–6 秒有一道微妙的渐变或白色眩光扫过表面,强化反射箔的错觉。
-
Dark field canvas暗场画布 layout variable可变特征
The style is usually staged on near-black #0a0a0f or deep charcoal so the metallic rainbow reads at full saturation; light backgrounds flatten it.
这种风格通常铺在接近纯黑 #0a0a0f 或深炭灰底上,让金属彩虹保持全饱和;浅底会把它压平。
-
Frosted blur panels磨砂模糊面板 surface avoid避免
Translucent blurred cards floating over wallpaper are the signature of glassmorphism; holographic surfaces are opaque and reflective, not see-through.
半透明模糊卡片悬浮在壁纸上是玻璃拟态的标志;全息表面不透明且反射,不是透视的。
Often confused with: Glassmorphism最容易混淆:玻璃拟态
Holographic全息彩虹箔(Holographic)
Glassmorphism玻璃拟态
This is Holographic because the surface behaves like reflective foil — rainbow iridescence, metallic sheen, and color-shifting highlights — rather than relying on transparency and blur for depth.
这是全息风格,因为表面表现得像反射箔——彩虹虹彩、金属光泽和随角度色移的高光——而不是靠透明和模糊来制造纵深。
It would become glassmorphism if the rainbow foil were replaced by translucent white panels floating over a decorative wallpaper with backdrop-filter blur as the main material.
如果彩虹箔被换成半透明白面板、靠 backdrop-filter 模糊作为主要材质浮在装饰壁纸上,就变成玻璃拟态了。
In code — optional starting points代码写法 —— 可选起点
Oil-slick conic gradient
background: conic-gradient(from 180deg, #00f2ea, #b967ff, #ff006e, #ffd700, #67e8f9, #00f2ea);
Silver foil base with specular highlight
background: linear-gradient(135deg, #ffffff 0%, #c4cfdc 30%, #8a93a3 50%, #e6eaf0 70%, #ffffff 100%);
Pastel shimmer overlay
background: radial-gradient(120% 80% at 20% 30%, rgba(255,179,217,.55), transparent 50%), radial-gradient(100% 70% at 80% 70%, rgba(103,232,249,.45), transparent 50%);
Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Build the surface as a sheet of holographic foil on a near-black canvas (#0a0a0f). Start with a metallic silver base: linear-gradient(135deg, #ffffff 0%, #c4cfdc 30%, #8a93a3 50%, #e6eaf0 70%, #ffffff 100%). Layer the oil-slick rainbow over it using conic-gradient(from 180deg, #00f2ea, #b967ff, #ff006e, #ffd700, #67e8f9, #00f2ea) or a 280px-wide multi-stop linear gradient at 115deg. Add pastel shimmer overlays: radial-gradient(120% 80% at 20% 30%, rgba(255,179,217,.55), transparent 50%) plus a cyan counterpart at 80% 70%. Use hairline chrome borders: 1px solid rgba(255,255,255,.55) with an inset 1px rgba(255,255,255,.25) highlight. Keep typography modern — SF Pro, Inter, or system sans at 500–600 weight, white (#ffffff) or near-white (#f2f4f8) text. Animate the sheen with a 4s ease-in-out infinite gradient-position shift. Buttons and cards should feel like stamped foil, not glass: zero backdrop-filter blur, no translucent panels, no soft drop shadows. The decisive guardrail: remove the rainbow iridescence and metallic base and the style collapses — it is not glassmorphism.
把表面做成铺在近黑画布(#0a0a0f)上的一张全息箔。先铺金属银底:linear-gradient(135deg, #ffffff 0%, #c4cfdc 30%, #8a93a3 50%, #e6eaf0 70%, #ffffff 100%)。再在上面叠加油渍彩虹:conic-gradient(from 180deg, #00f2ea, #b967ff, #ff006e, #ffd700, #67e8f9, #00f2ea),或一条 280px 宽、115deg 的多段线性渐变。加上粉彩 shimmer 叠层:radial-gradient(120% 80% at 20% 30%, rgba(255,179,217,.55), transparent 50%),以及另一道青色叠层在 80% 70%。发丝铬边用 1px solid rgba(255,255,255,.55),并加 inset 1px rgba(255,255,255,.25) 高光。字体保持现代——SF Pro、Inter 或系统无衬线,字重 500–600,文字用白 #ffffff 或近白 #f2f4f8。用 4s ease-in-out infinite 的 gradient-position 偏移来制作光泽扫动。按钮和卡片要像压印箔,而不是玻璃:零 backdrop-filter 模糊、无半透明面板、无柔和投影。关键 guardrail:去掉彩虹虹彩和金属底,风格就垮了——它不是玻璃拟态。
Accessibility & misuse可访问性与误用
Rainbow-on-silver text often fails contrast: the lightest foil regions can wash white text to below 4.5:1, so either keep text over the dark canvas or place it on a solid scrim behind the foil.
银底彩虹上的文字常常对比度不足:最亮的箔面区域会把白字压到 4.5:1 以下,因此要么把文字放在暗色画布上,要么在箔后垫一块实色 scrim。
The slow shimmer animation is decorative but can trigger vestibular issues or distract attention; honor prefers-reduced-motion by freezing the gradient sweep.
缓慢的光泽动画属于装饰性动效,但可能诱发前庭不适或分散注意力;响应 prefers-reduced-motion,冻结渐变扫动。
Holographic surfaces are inherently chromatic and busy; do not rely on color alone to convey state — pair hue changes with icons, labels, or outline changes so the UI remains usable for color-vision-deficient users.
全息表面本身色彩丰富且忙碌;不要只靠颜色传达状态——把色移与图标、标签或轮廓变化配对,确保色觉障碍用户也能使用。
Origin起源
Holographic foil as a physical finishing technique dates back to the 1980s, when micro-embossed diffraction patterns on metallic film began appearing on credit cards, concert tickets, and luxury packaging. The digital UI translation surfaced in the late 2010s, popularized by unicorn/startup branding, beauty-tech packaging, and year-in-review campaigns like Spotify Wrapped, which used rainbow-foil typography and iridescent cards to signal celebration and futurism.
全息箔作为实体后道工艺可追溯到 1980 年代,当时微压衍射图案的金属膜开始出现在信用卡、演唱会门票和奢侈品包装上。数字 UI 的转译在 2010 年代末浮现,被独角兽/创业公司品牌、美妆科技包装以及 Spotify Wrapped 这类年度回顾活动推红——它们用彩虹箔文字和虹彩卡片传递庆祝感和未来感。