Liquid
Glass.
iOS 26 Liquid Glass · 高饱和彩色渐变底 + 多层玻璃 chip 叠加 · 创意品牌 / 音乐 App / Web3 钱包 / 现代消费品 — 把"光感"做成产品语言。
Vibe
Glass
Fluid
C Style DNA
For products
that want to shimmer.
Fit · 适用
- iOS 26 / native app
- 音乐 / 视频流媒体
- Web3 钱包 / DeFi
- 创意品牌 hero
- NFT / 数字藏品平台
Unfit · 不适用
- 严肃 B2B / 工程文档
- 金融 / 保险专业
- 编辑型长文
- 大厂 enterprise SaaS
Keywords
liquid glassiOS 26backdrop blur渐变底多层玻璃SF Pro
D Craft Details
The four
shimmer disciplines.
Palette01 / 04
多色 radial 渐变背景 + 高饱和 4 色 light·所有 UI 元素半透明白·**背景是主角·UI 是玻璃 overlay**。
#A78BFA
#F472B6
#4ECDC4
#FF6B9D
#60A5FA
#FFA07A
glass
overlay
Typography02 / 04
SF Pro Display / Plus Jakarta 全场·800 做 hero·所有字带 text-shadow 0 1-2px·**字本身有光感**。
DISPLAY
Plus Jakarta 800
BODY
SF Pro / Inter · 17px
MONO
SF Mono · for metadata
Spacing03 / 04
圆角 22px 是主调·card padding 32px·section gap 100px·**玻璃元素之间留呼吸**·让 backdrop 透过来。
Visual Features04 / 04
- backdrop-filter blur(22-28px) saturate(180%)
- background rgba(255,255,255,0.18-0.42)
- 1px white border 0.4 opacity
- inset 0 1px 0 rgba(255,255,255,0.4) 顶高光
- shadow 0 6px 24px rgba(0,0,0,0.12)
- border-radius 22px / 100px pill 双档
- text-shadow 0 1-2px 防糊文字
E How to talk to CC
Three phrases
and CC shimmers.
STD
按 glassmorphism-vibrant 风格做这个音乐 App / 创意 landing / Web3 钱包
VAR
走 glassmorphism-vibrant + 渐变换暖橙紫 / 玻璃透明度更低 / 圆角更大
REMIX
主框 glassmorphism-vibrant + 局部 apple-hig-product 的卡片组件
CC receives this style ID ·
auto-loads
frontend-design + liquid-glass reference · 按 4 件 craft 实现·**不会冒出**·灰阶 / 硬阴影 / 黑底 / 0 圆角 / 大字 serif — 这些是 glassmorphism-vibrant 的 DON'T。
F Components
Three signature
liquid artifacts.
OVERLAPPING GLASS CHIPS
Vibe
Glass
Fluid
3 chip overlap · ±6° rotation · inset highlight
LIQUID GLASS BUTTON
渐变 + inset 双向高光 + blur 22
FLOATING GLASS CARD
Premium
Unlock all features
backdrop blur + inset top highlight + shadow
BUTTON
CARD
Balance
$28,492
HERO TYPE
Shimmer
Forward.
Forward.
v2.4 · live
G Related Skills
The composable set.
I Similar styles · 看完也许你还想看
The closest neighbors.
Continue
Apple HIG 产品
apple-hig-product
同为SF Pro + 圆角 + 玻璃·区别·经典 HIG 单蓝 accent + 冷调白 vs iOS 26 多彩 Liquid Glass + 渐变底
[ PLAY ]
复古未来
retro-futuristic
同为multi 色 + 高饱和 + 创意场景·区别·80s 霓虹硬光 + grid horizon vs iOS 26 玻璃柔光 + 多层叠加
LOUD
DOPAMINE
现代撞色
maximalist-bold
同为bold + multi 色 + dopamine·区别·扁平撞色 + 大字 vs 玻璃透光 + 渐变 + 多层叠