漸變產生器

漸變產生器

歡迎使用漸變產生器，這是一款專業級的設計工具，用於創建美觀的 CSS 漸變。無論您是需要為網站設置精緻的背景漸變、充滿活力的按鈕效果，還是引人注目的主視覺區塊，此工具都能透過即時預覽和多種導出格式為您提供全面的創意控制。

核心功能

互動式顏色停靠點

點擊漸變條上的任何位置即可添加新的顏色停靠點。拖動停靠點以重新定位，從而創建平滑的過渡或銳利的顏色邊界。將鼠標懸停在中間的停靠點上並點擊出現的刪除按鈕即可將其移除。

精確角度控制

使用直觀的角度撥盤設置精確的漸變方向，或從預設角度（0°、45°、90°、135°、180°、225°、270°、315°）中選擇常用方向。視覺化撥盤讓您能夠微調角度，獲得像素級完美的結果。

精選漸變預設集

從 16 種專業設計的漸變預設集開始，包括受歡迎的紫色迷霧 (Purple Haze)、海洋藍 (Ocean Blue)、清新薄荷 (Fresh Mint) 和霓虹 (Neon)。每個預設集都可以作為您進一步自定義的起點。

多種導出格式

• CSS - 標準 CSS 背景屬性，可直接粘貼使用
• Tailwind CSS - 用於 Tailwind 項目的工具類別或任意值
• SVG - 用於圖示和圖形的解析度無關漸變

如何使用此工具

1. 選擇漸變類型： 選擇「線性」用於方向性漸變，或選擇「放射狀」用於圓形漸變。
2. 挑選顏色： 使用顏色選取器或直接為起始和結束顏色輸入十六進制值 (Hex)。
3. 設置角度： 對於線性漸變，拖動角度撥盤或點擊預設角度。
4. 添加顏色停靠點： 點擊漸變條以添加中間色，從而創建複雜的漸變。
5. 預覽： 即時查看您的漸變更新。切換形狀疊加層，查看其在 UI 元素上的呈現效果。
6. 導出： 一鍵複製 CSS、Tailwind 或 SVG 代碼。

瞭解 CSS 漸變

線性漸變 (Linear Gradients)

線性漸變沿著直線過渡顏色。角度決定了方向：

放射狀漸變 (Radial Gradients)

放射狀漸變從中心點以圓形或橢圓形模式向外過渡顏色：

顏色停靠點 (Color Stops)

顏色停靠點定義了每種顏色在漸變中出現的位置。它們由顏色值和可選的位置百分比組成：

• #ff0000 0% - 起點為紅色
• #00ff00 50% - 中間為綠色
• #0000ff 100% - 終點為藍色

漸變設計最佳實踐

色彩和諧

• 類比色： 色輪上相鄰的顏色可以創建平滑、自然的漸變
• 互補色： 對比強烈的顏色可以創建充滿活力、高對比度的漸變
• 單色系： 同一種顏色的不同深淺可以創建精緻、優雅的漸變

無障礙考量

• 確保漸變背景與文字之間有足夠的對比度
• 避免在複雜的漸變過渡區域放置重要內容
• 使用無障礙工具測試漸變，以檢查色彩對比度比率

性能提示

• CSS 漸變比圖片文件更高效
• 漸變在所有設備上都能以原生解析度渲染
• 盡可能使用漸變代替大型背景圖片

常見漸變模式

按鈕漸變

按鈕通常使用微妙的漸變，向頂部變亮，營造出「凸起」的 3D 效果。使用 180° 左右的角度（從上到下），並將較淺的顏色設在 0%。

背景漸變

全頁背景通常使用對角線漸變（135° 或 45°），並搭配柔和、柔和的顏色，以免干擾內容。

卡片疊加層

圖片卡片通常使用從透明過渡到深色的漸變，使白色文字在照片上清晰易讀。

常見問題解答

什麼是 CSS 漸變？

CSS 漸變是兩種或多種顏色之間的平滑過渡，可用作背景圖像。CSS 支援線性漸變（顏色沿直線流動）、放射狀漸變（顏色從中心點向外輻射）和圓錐漸變（顏色繞中心旋轉）。漸變與解析度無關，在所有螢幕尺寸上都能清晰呈現。

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

線性漸變沿著指定角度的直線過渡顏色（例如從上到下、從左到右或對角線）。放射狀漸變則從中心點以圓形或橢圓形向外過渡顏色。線性漸變非常適合背景和按鈕，而放射狀漸變則可營造聚光燈或發光效果。

如何在漸變中使用顏色停靠點？

顏色停靠點定義了每種顏色在漸變中出現的位置，並可以包含位置百分比。例如，「linear-gradient(90deg, red 0%, yellow 50%, green 100%)」將紅色放在起點，黃色放在中間，綠色放在終點。調整停靠點位置可以創建更平滑或更銳利的顏色過渡。

我可以在 Tailwind CSS 中使用漸變嗎？

是的，Tailwind CSS 透過工具類別支援漸變，例如使用「bg-gradient-to-r」表示方向，以及「from-color」、「via-color」、「to-color」表示顏色。對於具有特定十六進制顏色的自定義漸變，您可以使用任意值，如「bg-[linear-gradient(90deg,#ff6b6b,#4ecdc4)]」或在 Tailwind 配置中定義自定義顏色。

漸變角度是如何運作的？

CSS 中的漸變角度從頂部開始（0deg 向上）並順時針旋轉。因此，90deg 指向右側，180deg 指向下側，270deg 指向左側。您還可以使用關鍵字，如「to right」 (90deg)、「to bottom」 (180deg) 或「to top left」用於對角線漸變。

CSS 漸變比漸變圖片好嗎？

CSS 漸變與圖片文件相比有幾個優點：它們與解析度無關（在 Retina 螢幕上始終清晰）、不需要 HTTP 請求（加載速度更快）、可以無限縮放而無品質損失、易於在代碼中編輯，且佔用頻寬更少。為了獲得更好的性能，請盡可能使用 CSS 漸變。

其他資源

• MDN Web Docs: CSS 漸變
• W3C CSS Images Module Level 3
• CSS Gradient - 其他漸變工具

其他相關工具:

顏色工具:

• CMYK 轉換為十六進制轉換器
• 顏色對比檢查器
• 顏色反轉器 新
• 色彩方案生成器
• 漸變產生器
• 十六進位轉CMYK轉換器
• 十六進製到RGB轉換器
• 圖片顏色選擇器 新
• 調色盤產生器 新
• 隨機顏色生成器 精選
• RGB到十六進製轉換器