CSS玻璃塑料效應示例

玻璃形態（Glassmorphism）的核心是通過半透明背景和背景模糊實現毛玻璃效果，關鍵步驟為：1. 使用rgba 設置元素半透明背景；2. 應用backdrop-filter: blur() 模糊背景內容；3. 添加淺色邊框和陰影增強層次感；4. 確保文本高對比度並在Safari 中添加-webkit-backdrop-filter 兼容支持，該效果在深色或動態背景下表現最佳。

Glassmorphism is a popular UI design trend that creates a frosted glass effect, giving elements a translucent, layered look with blur and subtle borders. It's commonly used in modern dashboards, menus, and cards to create depth and visual interest.

Here's a simple and effective CSS glassmorphism example you can use:

? Basic Glassmorphism Card

 <div class="glass-card">
  <h2>Welcome</h2>
  <p>This is a glassmorphism effect example using CSS.</p>
</div>

 body {
  background: url('https://source.unsplash.com/random/1920x1080/?nature') no-repeat center center fixed;
  background-size: cover;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* For Safari */
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
  padding: 30px;
  color: white;
  text-align: center;
  max-width: 300px;
}

? Key CSS Properties Explained

• background: rgba(255, 255, 255, 0.1)
  Semi-transparent background to allow content behind to show through subtly.

  

• backdrop-filter: blur(10px)
  Blurs everything behind the element (the key to the glass effect).

• -webkit-backdrop-filter: blur(10px)
  Needed for Safari support.

  

• border: 1px solid rgba(255, 255, 255, 0.3)
  Adds a light border to enhance the glassy look.

• box-shadow
  Adds depth and a soft glow.

? Tips for Better Results

• Use on dark or dynamic backgrounds (like images or gradients) to make the effect pop.
• Avoid using on plain white backgrounds — the effect won't be visible.
• Keep text high contrast (light text works best).
• Test on Safari — always include -webkit-backdrop-filter .

This example gives you a clean, modern glass card that feels light and layered. You can apply the same styles to navbars, modals, or sidebars.

Basically just blur the background behind the element and use a semi-transparent fill — that's the core of glassmorphism.

以上是CSS玻璃塑料效應示例的詳細內容。更多資訊請關注PHP中文網其他相關文章！