![grabient-1.jpg.jpeg Grabient 1.jpg.](https://free.com.tw/wp-content/uploads/2025/01/grabient-1.jpg.jpeg)
Grabient 是一個專為設計師、網頁或應用程式開發者設計的線上漸層配色工具,主要功能是提供更直覺、簡單易用的操作介面,讓使用者可以快速自訂並生成美麗的漸層背景。網站本身已經提供多種預設的漸層色範本,如果沒有任何想法也可以從這些樣式開始第一步。
值得一提的是 Grabient 所有漸層色都具有可自訂性,包括新增或刪除漸層顏色、顏色分佈比例、調整漸層角度等各項參數,最終將生成的漸層色 CSS 代碼複製到剪貼簿使用。
如果你需要漸層色 CSS 代碼,Grabient 是非常方便且實用的產生器。
網站名稱:Grabient
網站鏈結:https://www.grabient.com/
使用教學
開啟 Grabient 網站後會看到預設的漸層色範本,左上角有三個選項,簡單說明如下:
- Download Sketch:將漸層配色下載為 Sketch 軟體適用的檔案格式。
- Prefixes:生成的 CSS 代碼將包含瀏覽器前綴,提高漸層效果在不同瀏覽器中的相容性。
- Fallback BGC:在某些非常舊的瀏覽器(不支援 CSS 漸層效果),此備用顏色將作為背景使用。
預設情況下只有 Fallback BGC 會是勾選狀態,有需要的話記得先行調整。
![grabient-2.jpg Grabient](https://free.com.tw/wp-content/uploads/2025/01/grabient-2.jpg)
在漸層色範本的左下角可以調整漸層角度,設定後會即時更新、顯示預覽。
![grabient-3.jpg.jpeg Grabient 3.jpg.](https://free.com.tw/wp-content/uploads/2025/01/grabient-3.jpg.jpeg)
點選最右邊的按鈕調整每個色彩的分布比例。
![grabient-4.jpg.jpeg Grabient 4.jpg.](https://free.com.tw/wp-content/uploads/2025/01/grabient-4.jpg.jpeg)
在漸層色中的每個色彩都可單獨編輯,支援在 HSL、RGB 和 HEX 等顏色模式之間切換。
![grabient-5.jpg Grabient:線上漸層色彩產生器,自訂參數快速生成 CSS 程式碼](https://free.com.tw/wp-content/uploads/2025/01/grabient-5.jpg)
如果有誤植或用不到的顏色,只要拖曳往右邊移動就會出現刪除的垃圾桶。
![grabient-6.jpg.jpeg Grabient 6.jpg.](https://free.com.tw/wp-content/uploads/2025/01/grabient-6.jpg.jpeg)
最後將滑鼠移動到漸層色上方,點選左上角「Copy CSS」就能複製 CSS 代碼。
![grabient-7.jpg.jpeg Grabient 7.jpg.](https://free.com.tw/wp-content/uploads/2025/01/grabient-7.jpg.jpeg)