CSS 漸層程式碼產生器

漸層設定

預設漸層

什麼是 CSS 漸層？

CSS 漸層是一種視覺效果，可以在兩個或多個顏色之間平滑過渡。漸層可以是線性的（從一個方向到另一個方向）、放射狀的（從中心向外）或圓錐形的（繞著一個點旋轉）。現代網頁設計中，漸層被廣泛用於背景、按鈕和視覺效果，以創建更具吸引力和專業的外觀。

如何使用此工具

使用 CSS 漸層程式碼產生器非常簡單：選擇漸層類型（線性、放射狀或圓錐形），調整相應的參數（如角度或位置），添加或修改顏色停止點，然後在預覽中查看結果。生成的 CSS 程式碼可以直接複製到您的樣式表中，工具會自動包含必要的瀏覽器前綴。

應用場景

CSS 漸層可用於：網站背景設計、按鈕懸停效果、卡片設計、文字效果、邊框裝飾、進度條、登入表單背景和品牌視覺識別。它們提供了一種簡單而強大的方式來增強網站的視覺吸引力，而無需使用圖片，從而改善頁面加載時間。

常見問題

我可以自訂多少個顏色停止點？

您可以添加任意數量的顏色停止點。每個停止點都由一個顏色和一個位置百分比組成。更多停止點允許您創建更複雜和詳細的漸層效果。

線性漸層和放射狀漸層有什麼區別？

線性漸層沿著一條直線從一種顏色過渡到另一種顏色，而放射狀漸層從中心點向外輻射。線性漸層常用於背景，放射狀漸層常用於創建聚焦效果。

我需要手動添加瀏覽器前綴嗎？

不需要。此工具會自動為您生成所有必要的瀏覽器前綴版本，如 -webkit-background。您可以直接複製完整的程式碼。

如何在 Tailwind CSS 中使用漸層？

Tailwind CSS 提供了一些預定義的漸層類別，如 bg-gradient-to-right。對於自訂漸層，您可以使用 @apply 指令或在 Tailwind 配置中添加自訂類別。

我可以導出漸層為圖片嗎？

此工具專注於生成 CSS 程式碼。如果需要將漸層導出為圖片，您可以使用瀏覽器的開發者工具或其他圖形編輯工具截圖預覽。

哪些瀏覽器支援 CSS 漸層？

所有現代瀏覽器（Chrome、Firefox、Safari、Edge）都支援 CSS 漸層。此工具生成的程式碼包括必要的前綴，以支援較舊的瀏覽器版本。