Glass style · 02
Glassmorphism
玻璃拟态
A light, dimensional language of translucent panels, layered color, and controlled blur.
Live preview
See it in context.
Make something unexpected.
Creative tools for your next bright idea.
Style characteristics
- Translucent panels
- Background blur
- Soft gradient field
- Layered depth
- Fine transparent borders
- Readable contrast
Best for
Avoid for
Build direction
Prompt for your agent.
Chinese Prompt
Glassmorphism / 玻璃拟态
VISUAL DIRECTION
设计现代、轻盈、带有层次的数字产品界面。控制透明度，让内容始终易读。
LAYOUT
- 使用清晰的信息层级和一致的页面结构
- Desktop 使用多列布局；Tablet 减少列数；Mobile 自动转为单列
- 保持主要操作、搜索、数据卡片和内容列表在合理视线内
COLOR
- Soft blue, violet and pink gradient field
- 深色高对比文字；透明白色面板
- 只让主要浮层使用半透明材质
TYPOGRAPHY
- Modern sans serif，字重清晰
- 保持高对比、易读的文本层级
COMPONENTS
- 主面板使用 backdrop blur
- 浮动 Card、圆润 Button、清晰 Input
- 用 2–3 层深度组织内容
BORDER & RADIUS
- 1px semi-transparent white border
- Radius: 16–24px
SHADOW
- 使用宽广柔和的阴影，不使用霓虹光晕
SPACING
- 使用一致的 4px / 8px spacing system
- 让模块之间有明确节奏，避免无意义的留白或拥挤
INTERACTION
- 使用 150–200ms transition
- Hover 只改变必要的颜色、边框、阴影或位置
- Focus 状态清晰；按钮和输入区域可触控
RESPONSIVE
- Desktop 保持高效信息密度
- Tablet 合理减少列数
- Mobile 单列重排，禁止横向溢出
AVOID
- 全页面玻璃化
- Low contrast text / Excessive Blur
- Neon Glow / Heavy Borders / Chaotic gradients
English Prompt
Glassmorphism / 玻璃拟态
VISUAL DIRECTION
设计现代、轻盈、带有层次的数字产品界面。控制透明度，让内容始终易读。
LAYOUT
- Use a clear information hierarchy and consistent page structure
- Use multi-column desktop layouts; reduce columns on tablet; stack on mobile
- Keep primary actions, search, data cards, and content lists within a useful first view
COLOR
- Soft blue, violet and pink gradient field
- 深色高对比文字；透明白色面板
- 只让主要浮层使用半透明材质
TYPOGRAPHY
- Modern sans serif，字重清晰
- 保持高对比、易读的文本层级
COMPONENTS
- 主面板使用 backdrop blur
- 浮动 Card、圆润 Button、清晰 Input
- 用 2–3 层深度组织内容
BORDER & RADIUS
- 1px semi-transparent white border
- Radius: 16–24px
SHADOW
- 使用宽广柔和的阴影，不使用霓虹光晕
SPACING
- Use a consistent 4px / 8px spacing system
- Give modules deliberate rhythm; avoid meaningless whitespace or crowding
INTERACTION
- Use 150–200ms transitions
- Change only necessary color, border, shadow, or position on hover
- Keep focus states clear and controls touch-friendly
RESPONSIVE
- Preserve efficient information density on desktop
- Reduce columns thoughtfully on tablet
- Reflow to one column on mobile; never allow horizontal overflow
AVOID
- 全页面玻璃化
- Low contrast text / Excessive Blur
- Neon Glow / Heavy Borders / Chaotic gradients