发现设计灵感，创造优秀体验
灵感UI是您的专业设计资源平台，提供丰富的UI设计风格、精选配色方案和实用色卡资源，助力您的设计之旅
精选UI设计风格
查看更多
精选配色方案
查看更多蓝色科技
现代科技应用的专业蓝色配色
清新绿意
象征环保与健康的绿色系配色
创意紫
创意与时尚并存的紫色配色方案
热情红
充满活力与热情的红色系配色
实用色卡资源
查看更多网页安全色
适用于所有浏览器的216种网页安全色
ASE / ACO 格式Pantone系列
2023年Pantone色彩趋势色卡集合
ASE / ACO / PDF情绪色卡
基于情绪感受的色彩搭配色卡
PNG / PDF
玻璃拟态
模拟毛玻璃效果的半透明设计元素
风格介绍
玻璃拟态（Glassmorphism）是一种视觉设计风格，主要特点是模拟半透明磨砂玻璃的效果。这种设计风格在2020年末开始流行，从macOS Big Sur和iOS 14的设计语言中汲取灵感。玻璃拟态元素通常具有背景模糊效果、微妙的透明度和轻薄的边框，让用户界面元素看起来像是漂浮在背景之上的玻璃片。
设计特点
- 背景模糊效果（backdrop-filter: blur）
- 半透明背景色，通常使用低不透明度的白色
- 薄而清晰的边框，增强玻璃感
- 多层次的深度效果，元素看起来漂浮在背景上
- 优雅的光影效果，增强视觉层次感
精选案例
控制面板设计
采用玻璃拟态的智能家居控制面板，透明卡片与背景融为一体，同时保持清晰的层次感。
音乐播放器
玻璃拟态风格的音乐播放界面，透明控制面板与专辑封面背景创造出沉浸式体验。
网页卡片组件
现代网站中的玻璃拟态卡片组件，在渐变背景上展示内容，同时保持视觉轻盈感。
推荐配色
蓝调玻璃
蓝色系渐变背景配合玻璃拟态效果，适合科技产品界面
紫晶玻璃
紫色系渐变背景配合玻璃拟态效果，适合创意设计和娱乐应用
CSS代码示例
使用以下CSS代码可以快速实现玻璃拟态效果：
.glass-card {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
padding: 20px;
}主要属性说明：
- backdrop-filter: blur()：创建背景模糊效果的核心属性
- background: rgba()：半透明背景色
- border：细微的边框增强玻璃感
- box-shadow：柔和阴影提供深度感
注意：backdrop-filter属性在一些浏览器中可能需要前缀，且在老旧浏览器中不被支持。
配色方案库
探索专业筛选的色彩搭配方案，为您的设计项目找到完美配色
蓝色科技
现代科技应用的专业蓝色配色
适用场景：金融APP、B端管理系统、科技产品官网
生态绿
传达自然、健康与可持续的绿色系配色
适用场景：有机食品、健康应用、环保产品、农业网站
紫色创意
创意与神秘感的高贵紫色系配色
适用场景：创意产品、美容护肤、奢侈品牌、心灵成长类应用
热情红
充满活力与激情的红色系配色
适用场景：餐饮、体育赛事、促销活动、娱乐应用
碧空蓝
明亮清爽的天空蓝色系配色
适用场景：天气应用、旅游网站、水产相关产品、清洁服务
金色阳光
充满活力和温暖的黄金色系配色
适用场景：儿童产品、食品饮料、阳光度假、能源企业