{ "id": "glassmorphism", "type": "styles", "status": "published", "name": { "zh": "玻璃拟态", "en": "Glassmorphism" }, "aliases": [ "毛玻璃", "苹果那种透明玻璃效果", "玻璃拟态", "磨砂玻璃", "玻璃效果", "半透明模糊背景", "Frosted Glass", "Glassmorphism UI" ], "category": [ "Style", "Visual Language" ], "description": { "zh": "用半透明磨砂玻璃质感表示悬浮层级的视觉语言：backdrop-filter 背景模糊 + 低透明度 填充 + 一圈细窄的白色高光描边，让面板像磨砂玻璃片一样透出底下的色彩与图形。 它强调\"层\"——玻璃之下必须有可透出的丰富背景，否则质感无从谈起。", "en": "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." }, "use_when": [ { "zh": "背景是渐变 照片或彩色内容，需要透出层次", "en": "Over gradients, photos or colorful backdrops worth revealing" }, { "zh": "弹层 播放器 系统级悬浮面板，要轻盈不要沉闷", "en": "Overlays, players and floating system panels that should feel light" }, { "zh": "想延续 macOS iOS 的材质语言获得熟悉感", "en": "Evoking the familiar macOS/iOS material language" } ], "avoid_when": [ { "zh": "背景纯净单调，玻璃无内容可透 出来只剩灰雾", "en": "Plain backgrounds — frosted glass over nothing is just grey fog" }, { "zh": "长文本密集区域，模糊底会持续削弱文字对比度", "en": "Long-form reading areas where blur keeps eroding text contrast" }, { "zh": "低端设备兼容与性能敏感场景，backdrop-filter 开销大", "en": "Performance-sensitive or older devices — backdrop-filter is costly" } ], "tags": [ "glass", "blur", "transparency", "depth", "material" ], "variants": [ { "id": "frost", "name": { "zh": "磨砂", "en": "Frost" }, "note": { "zh": "高模糊低透明，最经典的奶白玻璃", "en": "High blur, low opacity — the classic milky glass" } }, { "id": "clear", "name": { "zh": "透明玻璃", "en": "Clear Glass" }, "note": { "zh": "低模糊高透明，更依赖高光描边", "en": "Light blur, high transparency, leans on the light rim" } }, { "id": "tinted", "name": { "zh": "有色玻璃", "en": "Tinted Glass" }, "note": { "zh": "带色调的玻璃，iOS 振动感传统", "en": "Color-tinted glass, the iOS vibrancy tradition" } } ], "applicable_components": [ "card", "navbar", "modal", "popover" ], "related": [ { "id": "skeuomorphism", "relation": "similar_to" }, { "id": "aurora", "relation": "similar_to" }, { "id": "minimalism", "relation": "similar_to" }, { "id": "card", "relation": "affects" }, { "id": "modal", "relation": "affects" } ], "demo": { "component": "glassmorphism", "modes": [ "default", "dark" ] }, "playground": { "task": { "zh": "免费开始与立即体验进入创作区，输入想法生成可编辑的本地草稿；灵感助手、演示同步和原「多格式导出」入口解释对应功能，实际支持将当前草稿导出为 .txt；可保存/恢复本页快照并返回编辑。明确 AI 与云同步只是本地模拟。", "en": "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." }, "checks": [ { "zh": "逐一操作 Aurora 原导航和主 CTA，检查对应内容与返回路径，不只是点击提示。", "en": "Use Aurora’s original navigation and primary CTAs; inspect content and return paths, not just click notices." }, { "zh": "完成上述 Aurora 操作后修改输入或撤销，检查结果与状态同步。", "en": "Complete the Aurora task, then change inputs or undo and inspect the matching result/state." }, { "zh": "用键盘和 390px / 320px 检查重排、焦点、校验；区分工具栏重载和内部清空，核对刷新后状态复位。", "en": "Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries." } ] }, "sources": [ { "name": "Apple HIG — Materials", "url": "https://developer.apple.com/design/human-interface-guidelines/materials" }, { "name": "MDN — backdrop-filter", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter" } ], "implementation": { "css": [ "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" ], "notes": { "zh": "玻璃三要素：半透明填充（白色 10%～40% 透明度）、backdrop-filter blur(8~24px)、 顶部 1px 半透明白描边制造玻璃厚度。深色底上玻璃效果最典型，可再叠一层顶部 内发光。务必用 @supports 为不支持 backdrop-filter 的环境准备降级（提高填充 不透明度）。文字对比度要按模糊后的实际背景校验。", "en": "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." } }, "prompts": { "basic": { "zh": "用玻璃拟态风格（Glassmorphism）设计界面：半透明磨砂玻璃面板，背景模糊透出底下的渐变或照片，配细白色高光描边。", "en": "\"Design an interface in Glassmorphism style: translucent frosted-glass panels that blur and reveal a gradient or photo beneath, edged with a thin white highlight.\"" }, "design": { "zh": "玻璃拟态设计规范：页面背景为鲜艳渐变或照片（深色背景效果最佳）；玻璃面板 填充 rgba(255,255,255,0.15) 左右，backdrop-filter blur(16px)；描边用 1px rgba(255,255,255,0.35)，顶部可加内发光高光；圆角 16px+；玻璃上的文字保证 4.5:1 对比度。深色模式用更深的渐变底，玻璃透明度略升。", "en": "\"Glassmorphism design spec: a vivid gradient or photo background (dark works best); panels filled with rgba(255,255,255,0.15) and backdrop-filter blur(16px); 1px rgba(255,255,255,0.35) rims with an optional inner top glow; radii 16px+; text on glass must keep 4.5:1 contrast. Dark mode deepens the backdrop and slightly raises transparency.\"" }, "implementation": { "zh": "用当前风格完成 Aurora 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致；首屏结构、实际导航与素材以 ReferenceStyleScene 为准。\n\n保留 Aurora 的雪山暮色背景照片、半透明蓝紫叠光及 38% / 30% / 26% 三栏（3% 间隙），不是另换通用渐变背景。功能列表使用现有半透明白渐变、1px 白边与 blur(9px)，独立图表面板用 blur(8px)、内高光和粉色柔光；白色 CTA 与无衬线白标题保持原位置。创作延续区使用现有浅蓝紫底与 blur(14px) 分区；600px 以下按内容单列重排。dark/variants 只按已有 CSS 调整表面和叠光，不反色原照片。\n\n免费开始与立即体验进入创作区，输入想法生成可编辑的本地草稿；灵感助手、演示同步和原「多格式导出」入口解释对应功能，实际支持将当前草稿导出为 .txt；可保存/恢复本页快照并返回编辑。明确 AI 与云同步只是本地模拟。\n\n静态封面、详情演示与 /style-scenes/glassmorphism/（英文 /en/style-scenes/glassmorphism/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。", "en": "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.\n\nKeep 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.\n\nStart 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.\n\nShare 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.\n\nInteraction 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.\n\nProvide 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." }, "agent": { "zh": "用当前风格完成 Aurora 同品牌完整页面，从原首屏延续到内容、具体操作结果和返回路径，而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致；首屏结构、实际导航与素材以 ReferenceStyleScene 为准。\n\n保留 Aurora 的雪山暮色背景照片、半透明蓝紫叠光及 38% / 30% / 26% 三栏（3% 间隙），不是另换通用渐变背景。功能列表使用现有半透明白渐变、1px 白边与 blur(9px)，独立图表面板用 blur(8px)、内高光和粉色柔光；白色 CTA 与无衬线白标题保持原位置。创作延续区使用现有浅蓝紫底与 blur(14px) 分区；600px 以下按内容单列重排。dark/variants 只按已有 CSS 调整表面和叠光，不反色原照片。\n\n完整页面操作：\n免费开始与立即体验进入创作区，输入想法生成可编辑的本地草稿；灵感助手、演示同步和原「多格式导出」入口解释对应功能，实际支持将当前草稿导出为 .txt；可保存/恢复本页快照并返回编辑。明确 AI 与云同步只是本地模拟。\n\n静态封面、详情演示与 /style-scenes/glassmorphism/（英文 /en/style-scenes/glassmorphism/）共用 renderer；静态封面不嵌套真实按钮，详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流，不用占位链接、仅变颜色或一句 toast 代替结果。\n\n操作状态仅存在当前页面内存；刷新、工具栏重载/重置与模式切换均恢复初始状态，不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作，不暗示跨页或持久保存。\n\n提供返回、取消或清空/重置路径，说明仅当前页内存的状态边界；不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排，保留可读字号和触控目标，不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点；弹层支持关闭和焦点返回，表单校验与结果可被辅助技术读到；尊重 prefers-reduced-motion。\n\n不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排；报告实际运行的检查与待验项，不将实现要求写成已通过结论。", "en": "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.\n\nKeep 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.\n\nFull-page operations:\nStart 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.\n\nShare 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.\n\nInteraction 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.\n\nProvide 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.\n\nAdd 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." } }, "style_spec": { "typography": { "zh": "无衬线，白色大标题", "en": "Sans-serif with white display type" }, "color": { "zh": "蓝紫粉渐变底 × 白色玻璃 rgba(255,255,255,.45)", "en": "Blue-purple-pink gradient with white glass rgba(255,255,255,.45)" }, "border": { "zh": "1px 半透明白边框", "en": "1px translucent white borders" }, "shadow": { "zh": "大范围柔和彩色投影", "en": "Large soft coloured shadows" }, "spacing": { "zh": "圆角 16px+，卡片内边距充足", "en": "16px+ radii with roomy card padding" }, "motion": { "zh": "200–300ms ease-out 的位移与模糊过渡，尊重 prefers-reduced-motion", "en": "200–300ms ease-out transitions for movement and blur; honour prefers-reduced-motion" }, "states": { "zh": "hover 提升透明度与模糊并轻微上浮；focus 用白色可见亮环；active 压低光晕；disabled 降不透明并去模糊；error 用红调玻璃且仅淡入颜色", "en": "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" } }, "preview": { "order": 4, "keywords": { "en": "TRANSPARENT LAYERS", "zh": "通透 · 层次 · 光" }, "url": "https://aurora.app", "scene": "aurora", "brand": "Aurora", "nav": [ { "zh": "产品", "en": "Product" }, { "zh": "方案", "en": "Solutions" }, { "zh": "价格", "en": "Pricing" }, { "zh": "关于", "en": "About" } ], "navExt": [ { "zh": "立即体验", "en": "Try it now" } ], "heroTitle": { "zh": "让灵感", "en": "Let inspiration" }, "heroTitle2": { "zh": "自然流动", "en": "flow naturally" }, "heroSub": { "zh": "Aurora 是一款全新的 AI 创作工具，\n在想法与灵感之间，创建更短的距离。", "en": "Aurora is a new AI creative tool.\nBring your ideas and inspiration closer together." }, "cta": { "zh": "免费开始 →", "en": "Start free →" }, "features": [ { "t": { "zh": "AI 灵感助手", "en": "AI idea assistant" }, "s": { "zh": "激发灵感、辅助创作", "en": "Inspiration for your creations" } }, { "t": { "zh": "云端同步", "en": "Cloud sync" }, "s": { "zh": "随时随用、灵感不丢失", "en": "Ideas that stay with you" } }, { "t": { "zh": "多格式导出", "en": "Multiple export formats" }, "s": { "zh": "连接创作的工作流", "en": "Connect your creative workflow" } } ], "panel": "mountain", "tokens": { "bg": "linear-gradient(160deg,#5B8DEF 0%,#7D6BE8 40%,#C86BD9 78%,#E989B8 100%)", "fg": "#FFFFFF", "sub": "rgba(255,255,255,.72)", "accent": "rgba(255,255,255,.85)", "accentFg": "#3B2E6E", "card": "rgba(255,255,255,.18)", "cardBorder": "rgba(255,255,255,.45)", "radius": "16px", "blur": "blur(14px) saturate(150%)", "font": "'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif", "heroSize": "24px" } } }