CSS 漸變生成器 (線性、徑向、錐形)

選漸變型別, 設角度, 新增或移除顏色停點。即時預覽。一鍵複製 CSS background 宣告。

型別角度: 135°

CSS 程式碼background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);

運作原理

線性漸變: 顏色沿給定角度的直線過渡。0° 指向上, 90° 指向右 (預設閱讀方向), 180° 指向下。背景、按鈕、英雄區最常用。

徑向漸變: 顏色從中心點向外過渡。形狀可以是圓 (預設) 或橢圓。聚光效果、太陽元素或吸引注意的中心元素最佳。

錐形漸變: 顏色繞中心點旋轉, 像色輪。較少見但對餅圖、錶盤、裝飾性旋轉器很強大。2020 年起現代瀏覽器支援。

每個顏色停點有顏色和 0% 到 100% 的位置。0% 是漸變起點, 100% 是終點。兩個停點給平滑的兩色漸變。中間加第三個停點根據位置建立三色混合或銳利帶。

銳利過渡 (無混合) 在同位置放不同顏色的兩個停點。例: '#000 50%, #fff 50%' 在中點建立黑到白的銳分。「條紋」背景就這麼做。

漸變不像背景圖需要 HTTP 請求, 原生渲染。無限放大不損失質量。動畫友好: 透過 background-position 過渡或用自定義屬性動畫漸變停點。

無障礙: 別在複雜漸變上直接放文字, 如果對比度沿漸變變化。要麼用純色覆層, 要麼確保漸變平均亮度與文字對比, 或用我們的對比檢查器測試。WCAG AA 要求普通文字 4.5:1, 大文字 3:1。

›舊瀏覽器支援漸變嗎?

線性和徑向漸變在所有現代瀏覽器 (Edge、Firefox、Chrome、Safari, 2014 起) 都工作。錐形漸變需 Chrome 69+、Firefox 83+、Safari 12.1+ — 舊瀏覽器請回退到線性。

›可以在 React Native 或移動應用中用?

Web CSS 漸變不直接轉換到 React Native — 用 `react-native-linear-gradient` 等庫。顏色停點可轉換, 但語法不同。iOS 和 Android 原生 UI 用平臺特定 API。

›可以用色名嗎?

可以。在顏色選擇器旁的文本輸入框, 把十六進位制 (#ff0000) 替換為 CSS 色名 (red, dodgerblue 等)。

›我的錐形漸變看起來怪?

錐形漸變從你設定的角度順時針旋轉。覆蓋完整 360° 旋轉的多個停點時最美。僅 2 個停點常顯得不完整。

›怎麼建立「光暈」效果?

用徑向漸變帶完全透明終點: 例如 'radial-gradient(circle, rgba(255,200,0,0.6) 0%, transparent 70%)'。

›可以動畫化漸變?

CSS 不直接動畫化漸變停點, 但你可以動畫化 background-position 實現移動效果, 或用 CSS 自定義屬性 (變數) 與 JavaScript 更新。

›為什麼 CSS 這麼長?

每個停點新增顏色和位置。多停點的長漸變產生冗長 CSS。簡單結果用 2-3 個停點。

›資料會上傳嗎?

不會。一切在本地計算; 不向伺服器傳送。