一個精心設計的漸層背景，不僅僅是顏色的堆疊，它能夠為網站注入活力、引導使用者視線，甚至傳達品牌的情感。除了基本的雙色過渡，CSS3 gradient 提供了更強大的工具，讓我們可以實現更細膩、更具創意的視覺效果。這次，我們將跳脫基礎語法，探索三種在當代網頁設計中廣受歡迎的漸層應用技巧，讓您的網站背景立刻提升一個檔次。

1.帶有角度的多色漸層

在許多新創公司或科技產品的登陸頁 (Landing Page) 上，我們常看到流動的、斜向的多色漸層。這種設計充滿活力與現代感，製作起來也非常簡單。關鍵在於使用角度值，並搭配三種以上的顏色來創造豐富的層次感。

HTML
<div class="gradient-box vibrant-flow"></div>
CSS
.vibrant-flow {
  width: 100%;
  height: 250px;
  background-image: linear-gradient(
    135deg,      /* 角度：135度，創造一個從左上到右下的斜向流動感 */
    #69FF97 10%, /* 第一種顏色，從10%的位置開始 */
    #00E4FF 40%, /* 第二種顏色 */
    #8D78FF 90%  /* 第三種顏色，到90%的位置結束 */
  );
}

說明： 我們使用 135deg 來定義漸層方向。同時，在顏色後面加上百分比（稱為色標 Color Stop），可以更精確地控制每種顏色在漸層中的分佈位置，讓色彩過渡更加自然且富有變化。
成品:

2.模擬柔光效果

有時我們不希望背景過於搶眼，而是希望它能襯托前景內容，並營造一種柔和、高級的氛圍。這時，可以使用放射狀漸層來模擬從某個點發散的柔和光暈，巧妙地將使用者視線聚焦到頁面中心。

html
<div class="gradient-box soft-light"></div>
CSS
.soft-light {
  width: 100%;
  height: 250px;
  background-image: radial-gradient(
    ellipse at top,  /* 形狀為橢圓，並從頂部中心開始發散 */
    #d4d2d8,         /* 中心是一個較亮的淡灰色 */
    #232526          /* 向外圍逐漸過渡到深灰色 */
  );
}

說明： 這裡我們使用 ellipse at top，讓一個橢圓形的亮色區域從頂部中心開始，向四周逐漸變暗。這種細微的明暗變化能增加頁面的深度感，卻又不會干擾主要內容。
成品: