什麼是網格漸層產生器?
為網站背景、社群媒體圖片和 UI 設計產生多色網格漸層。選擇顏色、調整控制點位置,取得超越簡單線性或放射狀漸層的有機效果。
使用方法
- 點選色塊或輸入十六進位色碼來選擇基礎顏色,最多可新增 6 個色彩控制點。
- 在畫布上拖曳控制點來改變漸層的流向。
- 複製 CSS 程式碼或將漸層下載為 PNG。
結果
一位 UI 設計師用 4 個控制點建立了從紫色到青色的網格漸層,用於登陸頁的首屏區域,然後複製 CSS 程式碼直接貼到樣式表中。
為網站背景、社群媒體圖片和 UI 設計產生多色網格漸層。選擇顏色、調整控制點位置,取得超越簡單線性或放射狀漸層的有機效果。
一位 UI 設計師用 4 個控制點建立了從紫色到青色的網格漸層,用於登陸頁的首屏區域,然後複製 CSS 程式碼直接貼到樣式表中。
建立精美的網格漸層背景
background-color: #f97316;
background-image:
radial-gradient(at 20% 30%, rgba(249,115,22,1) 0px, transparent 50%),
radial-gradient(at 80% 20%, rgba(225,29,72,1) 0px, transparent 50%),
radial-gradient(at 50% 80%, rgba(124,58,237,1) 0px, transparent 50%),
radial-gradient(at 10% 70%, rgba(6,182,212,1) 0px, transparent 50%);