Skip to content
界面图谱Interface Atlas
☰
中文
StylesStyle / Visual Language

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

The same page, ready to use

Start creating and Try it now open creation. Turn an idea into an editable local draft; assistant, simulated sync and the original Flexible export entry explain the corresponding features. Actual export saves the current draft as .txt; save/restore a page snapshot and return to editing. Label AI and cloud sync as local simulations.

Full-page preview · interact directly

Open page ↗

What to look for

  • 01Use Aurora’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
  • 02Complete the Aurora task, then change inputs or undo and inspect the matching result/state.
  • 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.

✓ 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)@supports

Three 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.

Build a complete Aurora page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. Keep preview.brand aligned with shared REFERENCE_BRANDS; ReferenceStyleScene defines the hero structure, actual navigation and assets.

Keep Aurora’s snowy dusk photograph, translucent blue-violet light layer and 38% / 30% / 26% columns with 3% gaps, not a replacement generic gradient. The feature list uses its existing translucent white gradient, 1px white rim and blur(9px); the separate chart uses blur(8px), inset highlights and a pink bloom. Retain white CTAs and sans display placement. The continuation uses its existing pale blue-violet surfaces and blur(14px) sections, stacking below 600px. Dark/variants follow existing surface/light selectors without inverting the photograph.

Full-page operations:
Start creating and Try it now open creation. Turn an idea into an editable local draft; assistant, simulated sync and the original Flexible export entry explain the corresponding features. Actual export saves the current draft as .txt; save/restore a page snapshot and return to editing. Label AI and cloud sync as local simulations.

Share one renderer between static covers, the detail experience and /style-scenes/glassmorphism/ (English /en/style-scenes/glassmorphism/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts.

Interaction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves.

Provide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion.

Add no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results.

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

Skeuomorphism拟物化

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".

StylesSimilar
Aurora Gradient极光渐变

An 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.

StylesSimilar
Minimalism极简主义

A 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.

StylesSimilar
Card卡片

A 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.

ComponentsAffects
Modal模态框

A 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

Sources

Markdown for agents · JSON