為網頁打造 CSS 漸層
這個產生器的功能
CSS 漸層會讓兩種以上的顏色在一個形狀上彼此融合，而這個產生器能把這樣的配色，不必手寫語法就直接變成可貼上的 CSS。你選好漸層類型、加入色標，工具便會組出對應的 background 規則（linear-gradient() 或 radial-gradient() 函式），而即時預覽會在你操作的當下同步呈現每一項變動。
每個色標都各自帶著自己的顏色、在軌道上的位置（百分比）以及不透明度，因此你能精準決定一種顏色在哪裡交棒給下一種。預設樣式交給你的是一份可微調的成品色盤，而不是一張空白畫布。
什麼時候適合用
當單色填滿顯得太平淡時就派得上用場：主視覺背景、按鈕、卡片、標章與疊色遮罩，只要加上細膩的顏色過渡都會更耐看。設計師用它幾秒就能試出一種樣貌；工程師則能取得正確語法，不必去背角度關鍵字和百分比規則。
要重現一個既有的漸層時它也很好用：一個色標一個色標地重建，微調角度，再把結果直接貼進樣式表或 styled-component。
範例：線性漸層
假設你想要一道從藍到紫的斜向淡出。把類型設成線性，第一個色標放在 0%、第二個放在 100%，再把角度設為 135deg。輸出就會是 background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);。切換到放射，同樣這兩個色標會呈現為 radial-gradient(circle, #3b82f6 0%, #8b5cf6 100%)，改為從中心往外擴散，而不是沿著一條線行進。
漸層類型、色標與邊界情況
線性漸層沿著一條由你設定角度或方向的直線行進；放射漸層則從中心點向外擴散，帶有形狀（circle 或 ellipse）、farthest-corner 這類尺寸，以及可調整的 X/Y 位置。加入超過兩個色標會形成多色色帶，而把兩個色標放在同一位置，會做出鮮明的顏色分界而非平順的融合。把不透明度降到 100% 以下，就能讓漸層疊在照片或另一個圖層之上。等成果滿意了，複製 CSS 或下載下來，放進你的專案即可。