輕鬆創建漂亮的 CSS 文字漸變
為您的網站創建令人驚歎的漸變文本效果
漸變控件
CSS 漸變文本
.gradient-text { background: linear-gradient(to right, #4F46E5, #EC4899); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
流行的漸變
Sunset
linear-gradient(to right, #FF512F, #F09819)
Magic
linear-gradient(to right, #4158D0, #C850C0, #FFCC70)
Ocean
linear-gradient(to right, #0093E9, #80D0C7)
Electric
linear-gradient(to right, #30CFD0, #330867)
水果沙拉
linear-gradient(to right, #FA709A, #FEE140)
Neon Glow
linear-gradient(to right, #00DBDE, #FC00FF)
如何使用
1
輸入您的文字
在 「Text（文字）」輸入欄位中鍵入要應用漸變的文字。
2
選擇 Gradient Type （漸變類型 ）
在 Linear（線性）、Radial（徑向）或 Conic（圓錐）漸變類型之間進行選擇。
3
調整方向或角度
對於線性漸變，請選擇一個方向。對於圓錐漸變，請設置角度。
4
自訂顏色
添加、刪除或調整色標及其位置，以創建所需的漸變。
5
複製或保存 CSS
複製生成的 CSS 代碼或將其另存為 CSS 檔以在專案中使用。
關於文本漸變
CSS 文字漸變允許您將漂亮的多色漸變直接應用於文字。這種效果曾經只能通過圖像實現，但現代 CSS 使其變得簡單高效。
瀏覽器支援：所有現代瀏覽器（包括 Chrome、Firefox、Safari 和 Edge）都支援文本漸變。對於較舊的瀏覽器（如 Internet Explorer），文字將回退到純色。
使用提示：文本漸變最適合粗體文本和高對比度顏色組合。嘗試不同的漸變類型和方向以獲得所需的效果。