Apple Liquid Glass

Apple 流动玻璃组件配方

组件变体

relative font-medium backdrop-blur-[40px] backdrop-saturate-[1.8] rounded-[20px] text-white before:absolute before:inset-0 before:rounded-[20px] before:p-[1px] before:-z-10 before:bg-gradient-to-r before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7] after:absolute after:inset-[1px] after:rounded-[19px] after:-z-10 after:bg-gradient-to-b after:from-white/20 after:to-transparent transition-all duration-500 ease-out bg-white/10 shadow-lg shadow-black/5 hover:bg-white/15 hover:shadow-xl hover:shadow-[0_0_20px_rgba(168,85,247,0.3)] active:scale-[0.98]

button

按钮

Liquid glass button with rainbow border gradient and fluid press effect

基础骨架: relative font-medium backdrop-blur-[40px] backdrop-saturate-[1.8] rounded-[20px] text-white before:absolute before:inset-0 before:rounded-[20px] before:p-[1px] before:-z-10 before:bg-gradient-to-r before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7] after:absolute after:inset-[1px] after:rounded-[19px] after:-z-10 after:bg-gradient-to-b after:from-white/20 after:to-transparent transition-all duration-500 ease-out
变体: 主要、次要、强调、轮廓
状态: hover、active、disabled

card

卡片

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

基础骨架: relative bg-white/10 backdrop-blur-[40px] backdrop-saturate-[1.8] rounded-[24px] shadow-xl shadow-black/10 before:absolute before:inset-0 before:rounded-[24px] before:p-[1px] before:-z-10 before:bg-gradient-to-br before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7] after:absolute after:inset-[1px] after:rounded-[23px] after:-z-10 after:bg-gradient-to-b after:from-white/15 after:to-transparent [box-shadow:inset_0_1px_0_rgba(255,255,255,0.4)] transition-all duration-500 ease-out
变体: 默认、浅色、深色、强调
状态: hover

input

输入框

Liquid glass input with rainbow focus ring animation

基础骨架: w-full bg-white/10 backdrop-blur-[40px] backdrop-saturate-[1.8] rounded-[16px] border border-white/20 text-white placeholder:text-white/50 focus:outline-none transition-all duration-500 ease-out
变体: 默认、填充
状态: focus、disabled

glassPanel

玻璃面板

Large liquid glass panel for sections and containers

基础骨架: relative bg-white/8 backdrop-blur-[40px] backdrop-saturate-[1.8] rounded-[32px] shadow-2xl shadow-black/20 before:absolute before:inset-0 before:rounded-[32px] before:p-[1px] before:-z-10 before:bg-gradient-to-br before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7] after:absolute after:inset-[1px] after:rounded-[31px] after:-z-10 after:bg-gradient-to-b after:from-white/20 after:to-transparent
变体: 默认
状态: 静态

refractionBadge

折射徽章

Small glass capsule badge with rainbow edge and pulse animation

基础骨架: relative inline-flex items-center gap-1.5 bg-white/15 backdrop-blur-[40px] backdrop-saturate-[1.8] rounded-full before:absolute before:inset-0 before:rounded-full before:p-[1px] before:-z-10 before:bg-gradient-to-r before:from-[#ff6b6b] before:via-[#4ecdc4] before:to-[#a855f7] after:absolute after:inset-[1px] after:rounded-full after:-z-10 after:bg-gradient-to-b after:from-white/30 after:to-transparent text-white
变体: 默认、成功、警告、错误
状态: 静态

glassStack

玻璃堆叠

Multiple glass layers stacked with offset for depth effect

基础骨架: relative
变体: 默认
状态: 静态

nav

导航栏

Fixed liquid glass navigation bar with rainbow bottom edge

基础骨架: bg-white/5 backdrop-blur-[40px] backdrop-saturate-[1.8] border border-white/10 [box-shadow:0_1px_0_0_rgba(255,255,255,0.1),inset_0_-1px_0_0_rgba(168,85,247,0.2)] px-4 md:px-8 py-3 md:py-4
变体: 默认、实色
状态: 静态

toggle

开关

iOS-style liquid glass toggle switch with glow effect

基础骨架: relative w-12 h-7 bg-white/15 backdrop-blur-[40px] backdrop-saturate-[1.8] rounded-full border border-white/20 transition-all duration-500 ease-out
变体: 默认
状态: active

slider

滑块

Liquid glass slider with glowing thumb

基础骨架: relative h-2 bg-white/10 backdrop-blur-[40px] rounded-full border border-white/15
变体: 默认、强调
状态: 静态