Grabient:線上漸層色彩產生器,自訂參數快速生成 CSS 程式碼

Grabient 1.jpg.

Grabient 是一個專為設計師、網頁或應用程式開發者設計的線上漸層配色工具,主要功能是提供更直覺、簡單易用的操作介面,讓使用者可以快速自訂並生成美麗的漸層背景。網站本身已經提供多種預設的漸層色範本,如果沒有任何想法也可以從這些樣式開始第一步。

值得一提的是 Grabient 所有漸層色都具有可自訂性,包括新增或刪除漸層顏色、顏色分佈比例、調整漸層角度等各項參數,最終將生成的漸層色 CSS 代碼複製到剪貼簿使用。

如果你需要漸層色 CSS 代碼,Grabient 是非常方便且實用的產生器。

網站名稱:Grabient
網站鏈結:https://www.grabient.com/

使用教學

開啟 Grabient 網站後會看到預設的漸層色範本,左上角有三個選項,簡單說明如下:

  • Download Sketch:將漸層配色下載為 Sketch 軟體適用的檔案格式。
  • Prefixes:生成的 CSS 代碼將包含瀏覽器前綴,提高漸層效果在不同瀏覽器中的相容性。
  • Fallback BGC:在某些非常舊的瀏覽器(不支援 CSS 漸層效果),此備用顏色將作為背景使用。

預設情況下只有 Fallback BGC 會是勾選狀態,有需要的話記得先行調整。

Grabient

在漸層色範本的左下角可以調整漸層角度,設定後會即時更新、顯示預覽。

Grabient 3.jpg.

點選最右邊的按鈕調整每個色彩的分布比例。

Grabient 4.jpg.

在漸層色中的每個色彩都可單獨編輯,支援在 HSL、RGB 和 HEX 等顏色模式之間切換。

Grabient:線上漸層色彩產生器,自訂參數快速生成 CSS 程式碼

如果有誤植或用不到的顏色,只要拖曳往右邊移動就會出現刪除的垃圾桶。

Grabient 6.jpg.

最後將滑鼠移動到漸層色上方,點選左上角「Copy CSS」就能複製 CSS 代碼。

Grabient 7.jpg.
Pseric

Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6582
加入聊天 💬
1