CSS 漸變生成器

關於CSS 漸變生成器

CSS 漸變生成器讓你看著效果調背景，不用對著數字盲改：首屏橫幅從一個品牌色過渡到另一個，商品圖後面一圈柔和的徑向光暈，按鈕上淡淡的光澤，或者用錐形漸變做餅圖式的進度環。可以從預設開始，也可以從零開始，每改一處，預覽都會馬上更新，滿意了再複製程式碼。

漸變型別有線性、徑向和錐形三種，按型別調整角度、形狀和位置。色標可以新增、刪除和移動，控制每種顏色從哪裡開始、到哪裡結束。複製的 CSS 第一行是用第一個色標顏色寫的純色背景，即使漸變顯示不出來，元素也有背景色，不會一片空白。顏色要精確到色值，可以先用色碼轉換換算好。全部在瀏覽器裡完成，不上傳，也不限次數。

CSS 漸變生成器怎麼用

1. 1
   選漸變型別

   選線性、徑向或錐形，或者從預設開始。

2. 2
   調角度、形狀和位置

   邊調邊看實時預覽。

3. 3
   編輯色標

   新增、刪除、移動色標，直到過渡效果滿意。

4. 4
   複製 CSS

   把帶後備顏色的程式碼複製到樣式表裡。

為什麼用熊仔工匠

• 三種漸變

  線性、徑向、錐形，各有各的設定。

• 色標隨意改

  色標可以新增、刪除，也能沿漸變移動位置。

• 實時預覽

  每一處改動馬上看到效果。

• 帶後備顏色

  CSS 先寫一行第一個顏色的純色背景，漸變顯示不了時也不會空白。