Preview
生成的 CSS
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
漸變控件
135°
0%
100%
流行的預設
漸變示例
探索這些令人驚歎的漸變示例，為您的下一個項目獲得靈感。按兩下任何漸變以將其載入到生成器中。
日落腮紅
溫暖的漸變色，靈感來自美麗的日落。
Ocean Breeze
平靜的坡度讓人聯想到沿海水域的感覺。
薄荷融合
清新現代的漸變色，融合了薄荷色和天藍色。
鬱鬱蔥蔥的花園
充滿活力的漸變代表自然之美。
宇宙之夢
靈感來自夜空的神奇漸變。
黃金時段
溫暖的漸變捕捉了暮光的精髓。
梯度文檔
什麼是 CSS 漸變？
CSS 漸變允許您在兩種或多種顏色之間顯示平滑過渡。它們可以用作元素的背景，有三種不同的類型：
- 線性漸變：沿直線過渡顏色。
- 徑向漸變：從中心點向外過渡顏色。
- 圓錐梯度：圍繞圓中的中心點過渡顏色。
如何使用漸變
使用我們的工具產生漸變後，您可以在專案中使用 CSS 代碼：
- 從生成器中複製 CSS 代碼。
- 將其粘貼到 CSS 檔中，或在 HTML 元素中內聯使用。
- 使用
backgroundproperty.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
- 使用兩種以上的顏色可獲得更複雜的漸變效果。
- 調整顏色位置以控制過渡發生的位置。
- 組合多個漸變以獲得更具創意的效果。
- 對於圓錐漸變，更改中心會創建有趣的圖案。
- 保存您最喜歡的漸變以備後用。
瀏覽器支援
CSS 漸變在現代瀏覽器中得到廣泛支援。但是，Internet Explorer 等較舊的瀏覽器可能無法正確呈現它們。始終提供回退顏色：
.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
Chrome
26+
Firefox
16+
Safari
6.1+
Edge
12+