CSS漸層產生器
只需選擇色彩和角度，即可在預覽中邊看邊產生CSS漸層程式碼
特色
預覽與程式碼同步更新
每當色彩或角度改變時，外觀和CSS會同時變化
支援線性、徑向和圓錐形
根據類型精確指定角度、形狀和中心位置
最多10色，拖曳即可調整
色彩位置在色棒上拖曳，透明度用滑桿調整
8種範例和隨機產生
以經典配色或隨機配色為起點進行微調
使用方式
1
選擇類型
從線性、徑向和圓錐形中選擇漸層類型
2
決定色彩
用色碼或範例選擇色彩，點擊「新增色彩」增加色彩並調整位置和透明度
3
調整方向
線性漸層指定角度或方向按鈕，徑向和圓錐形漸層指定中心位置
4
複製程式碼
點擊「複製」按鈕將單行CSS貼入您的樣式中
使用情境
製作英雄圖片背景
無需撰寫程式碼即可決定網站頂部或按鈕的背景色
部落格標題配色選擇
選擇接近的配色範例來調整文章標題背景
疊在照片上的遮罩層
用降低透明度的色彩在照片上方建立半透明層
調整多色漸層
拖曳調整3種或以上色彩邊界的位置
基礎知識
linear、radial和conic的差異
CSS漸層有3個函式，色彩變化方式不同，都寫在background屬性中使用。
- linear-gradient：linear-gradient是沿著指定角度的直線色彩變化的線性漸層。
- radial-gradient：radial-gradient是從中心位置向外散開，以圓形或楕圓形擴展色彩的徑向漸層。
- conic-gradient：conic-gradient是圍繞中心位置順時針轉一圈，色彩不斷變化的圓錐形漸層。
角度與方向關鍵字的對應
linear-gradient的角度以0deg代表由下向上，數值增加時順時針轉動。角度也可用「to right」等方向關鍵字表示，90deg與「to right」同方向，180deg與「to bottom」同方向。
色彩停止點和透明度寫法
色彩停止點（色彩停止）是指漸層中該色彩出現的位置，0%表示起點，100%表示終點。例如「#3B82F6 0%, #8B5CF6 100%」是從起點藍色到終點紫色的色彩變化指定。
- #RRGGBB格式：#RRGGBB格式用2位數的16進制分別表示紅、綠、藍的強度，#FF0000表示不透明的紅色。
- rgba格式：rgba格式將紅、綠、藍的值（0～255）加上透明度（0～1）來表示色彩，透明度0.5表示半透明的色彩。
安全性和隱私
瀏覽器內完成
輸入的資料僅在您的瀏覽器內處理，不會傳送到外部。
僅在瀏覽器內處理
漸層程式碼產生完全在您的瀏覽器內進行，輸入資料不會傳送到伺服器。
通訊透過HTTPS加密
頁面載入也透過TLS加密，第三者無法讀取內容。
不傳送給第三方
輸入內容不會傳送給廣告網路、追蹤器等外部服務。
結果不自動保存
選擇的色彩和設定和輸入建議不會保存在伺服器上。
在 Google 搜尋中追蹤 RAKKOTOOLS
185個實用工具，透過 Google 搜尋、AI 搜尋更容易找到！
- 搜尋中找到
- AI 搜尋也會顯示
- 發現新工具
更新資訊
- update #312
新增 CSS 漸層產生器，選擇顏色和角度即可產生程式碼