Glassmorphism
玻璃拟态
Aliases:毛玻璃苹果那种透明玻璃效果玻璃拟态磨砂玻璃玻璃效果半透明模糊背景Frosted GlassGlassmorphism UI
What is it
A visual language that expresses floating layers as frosted glass: a blurred backdrop (backdrop-filter), a low-opacity fill and a thin white rim of light. Panels literally reveal the vivid background beneath them, so the style is about depth — it only works over rich, colorful content worth revealing.
Design spec
Typography
Sans-serif with white display type
Color
Blue-purple-pink gradient with white glass rgba(255,255,255,.45)
Border
1px translucent white borders
Shadow
Large soft coloured shadows
Spacing
16px+ radii with roomy card padding
Motion
200–300ms ease-out transitions for movement and blur; honour prefers-reduced-motion
States
Hover raises opacity and blur and lifts slightly; focus shows a visible white ring; active lowers the glow; disabled loses opacity and blur; error tints the glass red, fading colour only
Style in action
See the full page, then try the interactive sceneFull-page preview
Let your ideas
flow naturally.
A new home for creative thinking.
Less distance between idea and reality.
Find a spark. Make it yours.
Your ideas, wherever you are.
Fits the way you create.
Good ideas
deserve to be seen.
A brighter tomorrow.
Interactive scene
Loading demo…
✓ When to use
- Over gradients, photos or colorful backdrops worth revealing
- Overlays, players and floating system panels that should feel light
- Evoking the familiar macOS/iOS material language
✕ When not to use
- Plain backgrounds — frosted glass over nothing is just grey fog
- Long-form reading areas where blur keeps eroding text contrast
- Performance-sensitive or older devices — backdrop-filter is costly
Variants
Frost
磨砂
High blur, low opacity — the classic milky glass
Clear Glass
透明玻璃
Light blur, high transparency, leans on the light rim
Tinted Glass
有色玻璃
Color-tinted glass, the iOS vibrancy tradition
Implementation
backdrop-filter: blur()background: rgba(255,255,255,0.1~0.4)border: 1px solid rgba(255,255,255,0.4)box-shadow: inset 0 1px 0 rgba(255,255,255,0.5)@supportsThree ingredients: a translucent fill (white at 10–40% opacity), backdrop-filter blur(8–24px), and a 1px translucent white top rim that sells the glass thickness. It shines on dark backgrounds — add an inner top glow. Always gate with @supports and fall back to a more opaque fill where backdrop-filter is unsupported. Verify text contrast against the blurred result, not the raw backdrop.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Implement a floating glass card + button section in Glassmorphism style in the current project. Inspect the existing design tokens and overlay components first; settle the backdrop layer (gradient or image). Requirements: - A colorful gradient page layer beneath translucent, backdrop-blurred panels - 1px translucent white rims plus an inner top highlight for glass thickness - An @supports fallback that raises panel opacity when backdrop-filter is unavailable - Dark mode with a deeper gradient backdrop (glass is most typical on dark) - Text contrast on glass stays readable - No new dependencies Run existing project checks when done and list the modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language that borrows real-world materials and physical forms for digital controls: leather stitching, wood grain, brushed metal, glass gloss. Buttons look pressable, switches look like levers — highlights, shadows and bevels make "what it looks like" teach "how it works".
StylesSimilarAn atmosphere built from large flowing gradient blooms: teal, violet and blue blurred blobs drift and merge across the background while the foreground stays minimal. Color is the protagonist — soft, cross-hue, aurora-like transitions that give the interface breath and warmth.
StylesSimilarA visual language built on "less is more": generous whitespace, a restrained monochrome palette and very few type scales let the content speak. All decoration is stripped away; hierarchy is created purely by space, weight and rhythm. Quiet, restrained, content-first.
StylesSimilarA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsAffectsA dialog rendered above the page with a translucent backdrop that interrupts the current flow and demands a task or decision first. The backdrop blocks interaction with the underlying page and focus is temporarily trapped inside — the most disruptive of the overlay containers.
ComponentsAffects