Holographic 全息彩虹箔(Holographic)

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 的金属铬感(偏好机械渐变与凝胶塑料,而非彩虹衍射)都不同。

Midnight Drive
Neon Coast
1:123:48

标本可交互 —— 点点看。Specimen is live — try it.

If you called it…如果你管它叫……

“rainbow foil texture that shifts color when you tilt it”「像倾斜时会变色的彩虹箔纹理」“ui that looks like unicorn makeup packaging”「看起来像独角兽美妆包装那种界面」“oil slick gradient with silver metallic shine”「带银色金属光泽的油渍渐变」“holographic sticker or credit card effect”「全息贴纸或信用卡上的那种效果」“pastel pink purple cyan shimmer surface”「粉彩粉紫青色的 shimmer 表面」“futuristic tech brand with rainbow gradients”「用彩虹渐变的未来科技品牌风」

Full style DNA完整风格 DNA

  1. 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 或多段线性渐变模拟光衍射。

  2. 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 中间调表现。

  3. 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%。

  4. 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,模仿压印箔边。

  5. 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 秒有一道微妙的渐变或白色眩光扫过表面,强化反射箔的错觉。

  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 或深炭灰底上,让金属彩虹保持全饱和;浅底会把它压平。

  7. 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最容易混淆:玻璃拟态

Midnight Drive
Neon Coast
1:123:48

Holographic全息彩虹箔(Holographic)

Midnight Drive
Neon Coast
1:123:48

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 模糊作为主要材质浮在装饰壁纸上,就变成玻璃拟态了。

Compare: Holographic vs Glassmorphism →对比页 →

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 这类年度回顾活动推红——它们用彩虹箔文字和虹彩卡片传递庆祝感和未来感。

See also相关词条