Glassmorphism

玻璃拟态组件配方

组件变体

font-medium backdrop-blur-2xl backdrop-saturate-150 rounded-2xl border border-white/40 ring-1 ring-inset ring-white/20 transition-all duration-300 ease-out bg-white/25 text-white shadow-lg shadow-black/5 hover:bg-white/35 hover:ring-white/30 hover:shadow-xl hover:shadow-black/10 active:scale-[0.98]

button

按钮

Liquid glass button with edge highlight, saturation boost and fluid transition

基础骨架: font-medium backdrop-blur-2xl backdrop-saturate-150 rounded-2xl border border-white/40 ring-1 ring-inset ring-white/20 transition-all duration-300 ease-out
变体: 主要、次要、强调、轮廓
状态: hover、active、disabled

card

卡片

Liquid glass card with multi-layer depth, edge refraction and top highlight gradient

基础骨架: bg-white/20 backdrop-blur-3xl backdrop-saturate-150 rounded-3xl border border-white/30 ring-1 ring-inset ring-white/25 shadow-xl shadow-black/10 [background-image:linear-gradient(to_bottom,rgba(255,255,255,0.15),transparent)] transition-all duration-300 ease-out
变体: 默认、浅色、深色、强调
状态: hover

input

输入框

Liquid glass input with enhanced focus glow and edge highlights

基础骨架: w-full bg-white/15 backdrop-blur-2xl backdrop-saturate-150 rounded-2xl border border-white/30 ring-1 ring-inset ring-white/20 text-white placeholder:text-white/50 focus:outline-none transition-all duration-300 ease-out
变体: 默认、填充
状态: focus、disabled

modal

模态框

Liquid glass modal with inner glow border and depth shadow

基础骨架: bg-white/20 backdrop-blur-3xl backdrop-saturate-150 rounded-3xl border border-white/30 ring-1 ring-inset ring-white/25 shadow-2xl shadow-black/20 [background-image:linear-gradient(to_bottom,rgba(255,255,255,0.15),transparent)]
变体: 默认
状态: 静态

pill

胶囊徽章

Capsule-shaped liquid glass badge with inner shadow highlight

基础骨架: inline-flex items-center gap-1.5 bg-white/20 backdrop-blur-xl backdrop-saturate-150 rounded-full border border-white/30 ring-1 ring-inset ring-white/20 shadow-[inset_0_1px_1px_rgba(255,255,255,0.3)] text-white
变体: 默认、成功、警告、错误
状态: 静态

toggle

开关

iOS-style liquid glass toggle switch with glow effect

基础骨架: relative w-12 h-7 bg-white/20 backdrop-blur-xl backdrop-saturate-150 rounded-full border border-white/30 ring-1 ring-inset ring-white/15 transition-all duration-300 ease-out
变体: 默认
状态: active

nav

导航栏

Fixed liquid glass navigation bar with bottom highlight edge

基础骨架: bg-white/10 backdrop-blur-3xl backdrop-saturate-150 border border-white/20 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] px-4 md:px-8 py-3 md:py-4
变体: 默认、实色
状态: 静态

slider

滑块

Liquid glass slider with glowing thumb and translucent track

基础骨架: relative h-2 bg-white/15 backdrop-blur-xl rounded-full ring-1 ring-inset ring-white/20
变体: 默认、强调
状态: 静态

controlGrid

控制网格

iOS Control Center style grid of liquid glass controls

基础骨架: grid grid-cols-2 gap-3 p-4 bg-white/15 backdrop-blur-3xl backdrop-saturate-150 rounded-3xl border border-white/20 ring-1 ring-inset ring-white/15
变体: 默认
状态: 静态

controlTile

控制磁贴

Single control tile for Control Center style grids

基础骨架: flex flex-col items-center justify-center aspect-square bg-white/20 backdrop-blur-xl backdrop-saturate-150 rounded-2xl border border-white/25 ring-1 ring-inset ring-white/20 text-white transition-all duration-300 ease-out
变体: 默认、激活
状态: hover、active