開發與網頁
CSS 漸層怎麼做
你想在頁面、卡片或投影片後面放漸層，但一直試著寫 CSS 太慢。你會選好類型、放好顏色，複製可以直接貼上的 CSS，或存成圖片。都在瀏覽器裡進行。
漸層上的文字兩端都要看得清楚。請用你打算使用的文字顏色，測試最淺和最深的顏色。
打開CSS 漸層產生器目錄
選擇漸層類型
線性沿直線混色，適合大多數背景。放射從中心向外擴散，像柔和的光暈。圓錐繞著一個點旋轉，像色輪或圓餅圖。
三種類型的差別，在於顏色走的路徑。 打開 cv.cm 的 CSS 漸層產生器
在「漸層」下選類型。按一個預設樣式當起點，或按「隨機」找靈感，預覽會立刻更新。
打開CSS 漸層產生器設定方向
線性和圓錐可以拖動「角度」：0° 朝上、90° 朝右、180° 朝下。放射則改選「圓形」或「橢圓形」。
放置顏色
每個顏色都有 0% 到 100% 的位置，最多可用 6 個。「新增顏色」加入一個，× 移除。位置靠近會形成銳利的邊界，距離遠則是柔和的混色。
每個顏色都在線上有個位置，CSS 會依序列出。 複製 CSS
「複製 CSS」會給你兩行：一行是給很舊瀏覽器用的純色，一行是漸層。把它們貼到元素的 CSS 規則裡。任何有尺寸的區塊都能用，例如 body 或卡片。
或儲存 PNG
要做投影片或桌布，選好「圖片尺寸」再按「儲存 PNG」。尺寸包括 1920 × 1080、2560 × 1440、手機用的 1080 × 1920，以及正方形貼文用的 1080 × 1080。
常見問題
為什麼頁面上看不到我的漸層？
元素很可能沒有高度。漸層會填滿元素的方框，空的區塊高度是 0。請給它高度或內容；如果要滿版，把 html 和 body 的 height 設為 100%。
為什麼 CSS 裡有兩行 background？
第一行是純色，第二行是漸層。畫不出漸層的瀏覽器會略過那一行，保留純色。
background 和 background-image 哪個比較好？
兩個都可以，因為漸層算是一種圖片。background 比較短，也會重設其他背景設定，所以要疊在其他背景上時請用 background-image。
怎麼做出分明的色條？
把兩個顏色放在同一個位置，例如都放在 50%。這樣就沒有混色的空間，顏色會在一條銳利的線上改變。
為什麼 PNG 看起來有色階斷層？
相近顏色之間的漸層範圍很寬時，可能出現淡淡的階梯，因為 PNG 每個色彩通道只存 256 階。請選差距大一點的顏色，或用修圖軟體加一點紋理。