你在 Apple 上見過的那種質感：用 CSS 自己做出來

作者：前端小智 2025-08-15 00:00:00

開發(fā) 前端

今天就一起動手，把常見的 Glassmorphism（毛玻璃）效果落到實處：半透明、背景虛化、帶層次的“玻璃板”，既通透又不刺眼。

我一直在給站點找“更現代”的氣質，但總差了點意思。直到最近看到 Apple 的 Liquid Glass 設計體系，才真正被點燃了——原來那種清透、柔和、帶一點“高級感”的界面，可以純 CSS復刻出來。

今天就一起動手，把常見的 Glassmorphism（毛玻璃）效果落到實處：半透明、背景虛化、帶層次的“玻璃板”，既通透又不刺眼。

什么是 Glassmorphism？

一句話：半透明 + 背景虛化 + 微妙的景深，模擬磨砂玻璃的觀感。

它好看的原因通常來自四點——為了易讀，我按要點拆開：

透明度（Transparency）：輕微不透明（如 0.08~0.15），讓底層背景若隱若現。
模糊（Blur）：backdrop-filter: blur(...) 對“玻璃板后面的內容”做虛化，霎時間就有了霜感。
層次（Depth）：柔和的 box-shadow 提升懸浮感與分層關系。
鮮活底色（Vibrant Base）：漸變或彩色底圖能把“玻璃”的邊緣與光影襯托出來。

背景要先鋪好（越大膽越出片）

這一類設計離不開漂亮的背景——否則“玻璃”就像貼在純白紙上，效果打了折扣。因此，先準備一個“能透出感覺”的底：

純色：比如高飽和紫色 #6200EA，簡單直接；
漸變：如 linear-gradient(135deg, #F6D365, #FDA085)，流動更強；
圖片/紋理：低噪點、低對比的紋理圖，既豐富又不搶戲。

關鍵 CSS 配方（最小可用解）

下面這份就是“毛玻璃基底方子”。先用它穩(wěn)穩(wěn)落地，再按需微調即可：

.glass-element {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
}

為什么這么寫？

background：半透明白，給“玻璃體”一點霧。
backdrop-filter: blur(10px)：對背后內容做模糊，霜化感立刻到位。
border：極淡的白色描邊，勾勒玻璃的“邊”。
box-shadow：從背景“抬”起來，層級更清晰。

與此同時，數值別貪大：過強的 blur 或陰影，既影響性能，也容易顯臟。10~12px 的模糊、多數場景夠用。

跨瀏覽器兼容（優(yōu)雅降級）

并非所有環(huán)境都支持 backdrop-filter。因此，先給一個“可用的退路”，再按支持情況增強：

.glass-element {
  background: rgba(255, 255, 255, 0.3); /* Fallback：沒有 blur 時更厚一點 */
}

@supports (backdrop-filter: blur(10px)) {
  .glass-element {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
  }
}

提示：在 WebKit 系（如 Safari）下，通常還需同時加上 -webkit-backdrop-filter 以確保一致性。

真實場景怎么用？

導航條：半透明導航與背景聯動，既輕又不失層次；
Hero/主視覺：把 CTA 按鈕做成毛玻璃，視覺“高級味”更足；
信息卡片：概覽數據、個人卡、商品卡都很適配；
蒙層/彈窗：既聚焦內容，又不把背景“封死”。

Demo：把“玻璃儀表盤”搭起來

下面這段完整頁面示例，包含背景漸變 + 多個玻璃卡片 + 懸浮反饋 + 進度條/統(tǒng)計，復制即跑：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three-Column Grid With Subgrid</title>
    <style>
      body {
        font-family: "Arial", sans-serif;
        background: radial-gradient(
            circle at 20% 80%,
            #120078 0%,
            transparent 50%
          ),
          radial-gradient(circle at 80% 20%, #4c1d95 0%, transparent 50%),
          radial-gradient(circle at 40% 40%, #1e40af 0%, transparent 50%),
          linear-gradient(135deg, #0f0f23, #1a1a2e);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2rem;
      }

      .dashboard-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
        max-width: 1000px;
        width: 100%;
      }

      .glass-widget {
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 20px;
        padding: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
        color: white;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .glass-widget::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.3),
          transparent
        );
      }

      .glass-widget:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.4);
        background: rgba(255, 255, 255, 0.12);
      }

      .widget-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
      }

      .widget-title {
        font-size: 1.2rem;
        font-weight: 600;
        opacity: 0.9;
      }

      .widget-icon {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
      }

      .widget-value {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        background: linear-gradient(135deg, #ffffff, #a3a3a3);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .widget-description {
        opacity: 0.7;
        font-size: 0.9rem;
        line-height: 1.4;
      }

      .progress-bar {
        width: 100%;
        height: 6px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
        margin-top: 1rem;
        overflow: hidden;
      }

      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #4ade80, #22d3ee);
        border-radius: 3px;
        animation: progressAnimation 2s ease-out;
      }

      @keyframes progressAnimation {
        from {
          width: 0%;
        }
      }

      .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-top: 1rem;
      }

      .stat-item {
        text-align: center;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .stat-number {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
      }

      .stat-label {
        font-size: 0.8rem;
        opacity: 0.7;
      }
    </style>
  </head>
  <body>
    <div class="dashboard-container">
      <div class="glass-widget">
        <div class="widget-header">
          <div class="widget-title">Revenue</div>
          <div class="widget-icon">??</div>
        </div>
        <div class="widget-value">$45,280</div>
        <div class="widget-description">
          Monthly revenue increased by 12% compared to last month
        </div>
        <div class="progress-bar">
          <div class="progress-fill" style="width: 75%"></div>
        </div>
      </div>

      <div class="glass-widget">
        <div class="widget-header">
          <div class="widget-title">Active Users</div>
          <div class="widget-icon">??</div>
        </div>
        <div class="widget-value">2,847</div>
        <div class="widget-description">
          Users currently online and engaging with your platform
        </div>
        <div class="progress-bar">
          <div class="progress-fill" style="width: 68%"></div>
        </div>
      </div>

      <div class="glass-widget">
        <div class="widget-header">
          <div class="widget-title">Performance</div>
          <div class="widget-icon">??</div>
        </div>
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-number">98.5%</div>
            <div class="stat-label">Uptime</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">1.2s</div>
            <div class="stat-label">Load Time</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">156</div>
            <div class="stat-label">Requests/min</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">99.9%</div>
            <div class="stat-label">Success Rate</div>
          </div>
        </div>
      </div>

      <div class="glass-widget">
        <div class="widget-header">
          <div class="widget-title">Storage</div>
          <div class="widget-icon">??</div>
        </div>
        <div class="widget-value">127 GB</div>
        <div class="widget-description">
          Total storage used across all your projects and assets
        </div>
        <div class="progress-bar">
          <div class="progress-fill" style="width: 42%"></div>
        </div>
      </div>
    </div>
  </body>
</html>

性能優(yōu)化三招（別被 blur 拖垮）

**毛玻璃好看，但模糊是“重活”。**為了避免掉幀或發(fā)熱，建議：

控制模糊半徑：blur(6~10px) 多數足夠；越大越吃 GPU。
減少層數與重疊面積：同屏“玻璃板”別鋪太滿，能合并就合并。
優(yōu)先測手機：低端設備更敏感，真機跑一遍，觀察滾動與動畫是否順滑。

小結

換個角度講，Glassmorphism 就像給界面“蒙上了一層會呼吸的玻璃”。只要背景夠有戲、透明與模糊拿捏得當、陰影不過火，你就能在網頁里重現 Apple 式的那種清透與高級。

謹慎使用在關鍵部位（導航、按鈕、卡片、彈窗），既提氣質，又不喧賓奪主。試試把本文的 Demo 拆到你的項目里，然后按品牌配色微調，你會很快收獲“現代感”的正反饋。

責任編輯：姜華來源：大遷世界