CSS 漸變產生器

十年前，網頁設計師會在 Photoshop 中設計漸變背景，裁切成較大的 JPG 圖片並設為重複背景。這不僅影響 SEO 和載入速度，在現代 4K 螢幕上還會模糊。

現代瀏覽器引入了 linear-gradient() CSS 函式。由於這是數學指令而非靜態影像，瀏覽器的 GPU 會即時算繪色彩過渡。使用 Utiliome 產生器可以快速建立複雜的多色漸變，瞬間載入並完美適應各種螢幕尺寸。

掌握三種核心 CSS 漸變類型可以帶來極大的設計靈活性：

• 線性漸變 (Linear): 最常見的類型。指定角度（如 45deg 或 to right bottom），色彩沿該軸線平滑過渡。
• 徑向漸變 (Radial): 建立圓形或橢圓發散效果，非常適合突出頁面中心元素或打造立體球體陰影。
• 圓錐漸變 (Conic): CSS 規範的新特性。色彩圍繞中心點（0 到 360 度）旋轉過渡，非常適合製作純 CSS 圓餅圖和旋轉載入動畫。

基礎漸變只需起始和結束兩種顏色，而 Utiliome 允許您在時間軸上新增無限個色塊。

例如，撰寫 linear-gradient(to right, red 0%, green 50%, blue 100%) 時，瀏覽器會在螢幕前半段平滑地從紅色過渡到綠色，後半段從綠色過渡到藍色。

將兩種不同顏色設為相同的百分比位置（如 red 50%, blue 50%）可以建立分明的硬邊界。這種技巧常用於製作 CSS 條紋圖案或旗幟。

現代網頁設計的一大趨勢是在大號標題文字上應用絢麗漸變（由 Apple 和 Stripe 等公司引領）。

要實現此效果，您只需在 Utiliome 中產生標準漸變，並新增以下三條 CSS 規則：

1. 將漸變應用到元素： background-image: linear-gradient(...);
2. 將背景裁剪至文本： -webkit-background-clip: text; background-clip: text;
3. 將字型本身設為透明： -webkit-text-fill-color: transparent;

這樣既能保持文字的可選取性與 SEO 友善度，又能呈現出色的視覺效果。

過去撰寫 CSS 漸變非常繁瑣，因為語法標準經歷過多次變更。開發者往往需要撰寫多行程式碼才能相容 Firefox、Safari 和 Chrome。

如今 linear-gradient() 標準語法已被廣泛支援。為了保障企業級應用在舊版裝置上的穩定表現，Utiliome 支援自動產生包含 -webkit- 前綴的程式碼。

在使用 Tailwind CSS 開發 React 或 Next.js 應用時，撰寫內聯 CSS 樣式會破壞原子化 CSS 的工作流程。

Utiliome 完美解決了這一難題。在畫布上完成漸變後，只需選擇匯出 Tailwind，系統就會將 HEX 色彩代碼對映為 Tailwind 類別（如 from-[#ff0000] via-[#00ff00] to-[#0000ff]），可直接貼上到 JSX 中。