M+ 博物館漸變卡片效果 — 視覺層次提升技巧

M+ 博物館嘅漸變美學

M+ 博物館（mplus.org.hk）個網站嘅展覽卡片好有特色 — 每張卡片都有一個獨特嘅漸變背景，由一種顏色流暢過渡到另一種顏色，營造出藝術感同現代感。當你 hover 上去嗰陣，顏色會變得更加鮮艷，亮度提升，成個互動體驗好流暢。

對於植物店嚟講，漸變卡片可以用嚟展示唔同類型嘅植物 — 例如觀葉植物用綠色漸變，開花植物用暖色漸變，多肉植物用大地色漸變。每個分類都有自己嘅視覺個性。今堂課就教你點樣做到。

基礎漸變卡片 — linear-gradient 核心語法

CSS 漸變嘅核心就係 `linear-gradient()` 函數，可以定義顏色同方向：

/* ===== 漸變卡片 — 基礎版本 ===== */

.gradient-card {
  position: relative;
  padding: 2.5rem;
  border-radius: 20px;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  
  /* 核心漸變背景 */
  background: linear-gradient(
    135deg,           /* 角度 — 由左下到右上 */
    #3d1a1a 0%,       /* 起點：深紅 */
    #1a2e2e 100%      /* 終點：深青 */
  );
  
  /* 基礎陰影 */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  
  /* 過渡 */
  transition: all 0.4s ease;
}

/* Hover 效果 — 亮度提升 */
.gradient-card:hover {
  filter: brightness(1.15);
  transform: translateY(-6px);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.2);
}

/* 卡片內容 */
.gradient-card__category {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  font-size: 0.75rem;
  color: #FFFFFF;
  font-weight: 500;
  margin-bottom: 1rem;
  width: fit-content;
}

.gradient-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.gradient-card__desc {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.gradient-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: gap 0.2s ease;
}

.gradient-card__link:hover {
  gap: 0.75rem;
}

.gradient-card__link::after {
  content: '→';
  transition: transform 0.2s ease;
}

.gradient-card__link:hover::after {
  transform: translateX(4px);
}

📸 **截圖位置**：顯示深紅到深青嘅漸變卡片，hover 時亮度提升

多種漸變配色組合 — 建立視覺系統

以下係 6 款精心調配嘅漸變組合，涵蓋唔同嘅情緒同主題：

/* ===== 漸變配色系統 ===== */

/* 配色 1：綠野仙蹤 — 觀葉植物 */
.gradient--green {
  background: linear-gradient(135deg, #1a472a 0%, #2d6b4c 50%, #4a9d6f 100%);
}

/* 配色 2：夕陽暖橙 — 開花植物 */
.gradient--warm {
  background: linear-gradient(135deg, #8b4513 0%, #d4740e 50%, #f0a030 100%);
}

/* 配色 3：紫羅蘭夜 — 蘭花系列 */
.gradient--purple {
  background: linear-gradient(135deg, #2d1b4e 0%, #5b3a8c 50%, #8b5fbf 100%);
}

/* 配色 4：海洋藍調 — 水培植物 */
.gradient--blue {
  background: linear-gradient(135deg, #0d324d 0%, #1a6b8c 50%, #2a9db8 100%);
}

/* 配色 5：玫瑰莊園 — 花卉系列 */
.gradient--rose {
  background: linear-gradient(135deg, #6b1c3b 0%, #b83a5e 50%, #e0607e 100%);
}

/* 配色 6：大地氣息 — 多肉植物 / 盆栽 */
.gradient--earth {
  background: linear-gradient(135deg, #4a3426 0%, #7a5c3e 50%, #a88b6a 100%);
}

/* 配色 7：晨露清新 — 空氣淨化植物 */
.gradient--morning {
  background: linear-gradient(135deg, #2c5f5d 0%, #4a807e 50%, #6ab0ad 100%);
}

/* 配色 8：黃金秋葉 — 秋季限定 */
.gradient--autumn {
  background: linear-gradient(135deg, #8b2500 0%, #cc5500 50%, #e8a838 100%);
}

HTML 使用方式

<!-- 漸變卡片展示區 -->
<section class="gradient-gallery">
  <h2 class="gradient-gallery__title">植物系列</h2>
  
  <div class="gradient-grid">
    
    <!-- 觀葉植物 — 綠色漸變 -->
    <div class="gradient-card gradient--green">
      <span class="gradient-card__category">觀葉植物</span>
      <h3 class="gradient-card__title">龜背竹系列</h3>
      <p class="gradient-card__desc">
        經典嘅室內綠植，葉片獨特嘅裂紋造型令人一見難忘。
      </p>
      <a href="#" class="gradient-card__link">探索系列</a>
    </div>
    
    <!-- 開花植物 — 暖橙漸變 -->
    <div class="gradient-card gradient--warm">
      <span class="gradient-card__category">開花植物</span>
      <h3 class="gradient-card__title">熱帶花卉</h3>
      <p class="gradient-card__desc">
        來自熱帶雨林嘅繽紛色彩，為空間注入溫暖活力。
      </p>
      <a href="#" class="gradient-card__link">探索系列</a>
    </div>
    
    <!-- 蘭花系列 — 紫色漸變 -->
    <div class="gradient-card gradient--purple">
      <span class="gradient-card__category">蘭花系列</span>
      <h3 class="gradient-card__title">優雅蘭花</h3>
      <p class="gradient-card__desc">
        高貴典雅嘅蘭花品種，散發淡淡清香。
      </p>
      <a href="#" class="gradient-card__link">探索系列</a>
    </div>
    
    <!-- 水培植物 — 藍色漸變 -->
    <div class="gradient-card gradient--blue">
      <span class="gradient-card__category">水培植物</span>
      <h3 class="gradient-card__title">水中綠意</h3>
      <p class="gradient-card__desc">
        毋須泥土，清水之中即可生長嘅現代植物。
      </p>
      <a href="#" class="gradient-card__link">探索系列</a>
    </div>
    
  </div>
</section>

📸 **截圖位置**：顯示 4 張唔同配色嘅漸變卡片排成網格

進階效果 — 文字漸變

用 `background-clip: text` 可以做到文字本身都有漸變效果：

/* ===== 文字漸變效果 ===== */

/* 漸變標題 */
.gradient-text {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  background: linear-gradient(135deg, #2D5016, #4A7A28, #8FAE7A);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* 標準語法 */
  line-height: 1.2;
  margin-bottom: 1rem;
}

/* 動態漸變文字 */
.gradient-text--animated {
  background: linear-gradient(
    90deg,
    #2D5016,
    #4A7A28,
    #8FAE7A,
    #4A7A28,
    #2D5016
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s linear infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* 金色漸變 — 用於特別標示 */
.gradient-text--gold {
  background: linear-gradient(135deg, #B8860B, #DAA520, #FFD700, #DAA520);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

進階效果 — 動態漸變背景

靜態漸變已經好靚，但如果想要更加搶眼，可以用動態漸變：

/* ===== 動態漸變背景 ===== */

.gradient-card--animated {
  position: relative;
  padding: 2.5rem;
  border-radius: 20px;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  
  /* 動態漸變 */
  background: linear-gradient(
    -45deg,
    #2D5016,
    #4A7A28,
    #1a472a,
    #8FAE7A
  );
  background-size: 400% 400%;
  animation: gradient-flow 8s ease infinite;
  
  box-shadow: 0 8px 30px rgba(45, 80, 22, 0.2);
  transition: all 0.4s ease;
}

@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-card--animated:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 50px rgba(45, 80, 22, 0.3);
}

/* ===== 光澤掃過效果 ===== */
.gradient-card--shine {
  position: relative;
  overflow: hidden;
}

/* 光澤層 */
.gradient-card--shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.7s ease;
  z-index: 1;
  pointer-events: none;
}

.gradient-card--shine:hover::before {
  left: 150%;
}

網格佈局 — 響應式排列

/* ===== 漸變卡片網格 ===== */

.gradient-gallery {
  padding: 4rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.gradient-gallery__title {
  font-size: 2rem;
  font-weight: 700;
  color: #1A3009;
  margin-bottom: 2.5rem;
  text-align: center;
}

.gradient-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* 響應式 */
@media (max-width: 1024px) {
  .gradient-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .gradient-grid {
    grid-template-columns: 1fr;
  }
  
  .gradient-card,
  .gradient-card--animated {
    min-height: 260px;
  }
}

/* 大卡片橫跨兩格 */
.gradient-card--wide {
  grid-column: span 2;
}

@media (max-width: 1024px) {
  .gradient-card--wide {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .gradient-card--wide {
    grid-column: span 1;
  }
}

📸 **截圖位置**：顯示 2×2 網格排列嘅漸變卡片，每張有獨特配色

完整植物店版本 — 綜合應用

以下係將所有技巧結合嘅完整版本：

<!-- ===== 完整植物店漸變展示 ===== -->
<section class="plant-showcase">
  <div class="plant-showcase__header">
    <span class="plant-showcase__label">精選系列</span>
    <h2 class="plant-showcase__title gradient-text">
      為你嘅空間揀選綠意
    </h2>
    <p class="plant-showcase__subtitle">
      每個系列都有獨特嘅漸變色彩，代表唔同植物嘅個性
    </p>
  </div>
  
  <div class="plant-showcase__grid">
    
    <!-- 大卡片 — 特色推薦 -->
    <div class="gradient-card gradient-card--wide gradient--green gradient-card--shine">
      <span class="gradient-card__category">🏆 店長推薦</span>
      <h3 class="gradient-card__title">室內淨化系列</h3>
      <p class="gradient-card__desc">
        精選空氣淨化功效最佳嘅植物，包括龜背竹、虎尾蘭、黃金葛等，
        為你打造清新健康嘅生活空間。
      </p>
      <a href="#" class="gradient-card__link">立即選購 →</a>
    </div>
    
    <!-- 標準卡片 -->
    <div class="gradient-card gradient--warm">
      <span class="gradient-card__category">開花植物</span>
      <h3 class="gradient-card__title">熱帶花卉</h3>
      <p class="gradient-card__desc">
        來自熱帶嘅繽紛色彩，為空間注入溫暖。
      </p>
      <a href="#" class="gradient-card__link">探索 →</a>
    </div>
    
    <div class="gradient-card gradient--blue">
      <span class="gradient-card__category">水培植物</span>
      <h3 class="gradient-card__title">水中綠意</h3>
      <p class="gradient-card__desc">
        毋須泥土，清水之中即可生長。
      </p>
      <a href="#" class="gradient-card__link">探索 →</a>
    </div>
    
    <div class="gradient-card gradient--purple">
      <span class="gradient-card__category">蘭花系列</span>
      <h3 class="gradient-card__title">優雅蘭花</h3>
      <p class="gradient-card__desc">
        高貴典雅，散發淡淡清香。
      </p>
      <a href="#" class="gradient-card__link">探索 →</a>
    </div>
    
    <div class="gradient-card gradient--earth">
      <span class="gradient-card__category">多肉植物</span>
      <h3 class="gradient-card__title">肉肉世界</h3>
      <p class="gradient-card__desc">
        小巧可愛，極易打理。
      </p>
      <a href="#" class="gradient-card__link">探索 →</a>
    </div>
    
  </div>
</section>

/* ===== 植物店展示區 — 完整 CSS ===== */

.plant-showcase {
  padding: 5rem 1.5rem;
  background: linear-gradient(180deg, #F5F8F0 0%, #FFFFFF 100%);
}

.plant-showcase__header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
}

.plant-showcase__label {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: rgba(45, 80, 22, 0.1);
  color: #2D5016;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 50px;
  margin-bottom: 1rem;
}

.plant-showcase__subtitle {
  color: #777;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-top: 0.75rem;
}

/* 網格佈局 */
.plant-showcase__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* 第一張大卡片橫跨兩格 */
.plant-showcase__grid .gradient-card:first-child {
  grid-column: span 2;
}

/* 響應式 */
@media (max-width: 768px) {
  .plant-showcase__grid {
    grid-template-columns: 1fr;
  }
  
  .plant-showcase__grid .gradient-card:first-child {
    grid-column: span 1;
  }
}

/* ===== 所有漸變卡片統一樣式 ===== */
.gradient-card {
  position: relative;
  padding: 2rem;
  border-radius: 24px;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gradient-card:hover {
  filter: brightness(1.12);
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

/* 確保卡片內容喺光澤層上面 */
.gradient-card__category,
.gradient-card__title,
.gradient-card__desc,
.gradient-card__link {
  position: relative;
  z-index: 2;
}

📸 **截圖位置**：顯示完整植物店展示區，有大卡片同細卡片組合，每張有獨特漸變

重點回顧

下一步

恭喜！你已完成 5 篇 CSS 進階教學：
1. ✅ CSS Variables 品牌色系統
2. ✅ 全屏視頻 Hero
3. ✅ 毛玻璃導航欄
4. ✅ Scroll-Snap 橫向滑動
5. ✅ 漸變卡片效果

將呢啲技巧組合埋一齊，你就可以打造出一個專業級嘅植物店網站！

**關於 TrendyOnly**

TrendyOnly 係專為香港中小企打造嘅 AI 網站生成平台。我哋整合咗以上所有最新 CSS 技術 — CSS Variables、backdrop-filter、Scroll-Snap、漸變動畫 — 自動幫你生成最潮嘅網站。你唔需要寫一行代碼，就可以擁有參考 Buly 1803、Upper House、K11、Honbo、M+ 博物館等頂尖品牌風格嘅專業網站。

開植物店？我哋會自動推薦：

上 [trendyonly.com](https://trendyonly.com) 免費試用，5 分鐘生成你嘅專屬網站！