CSS 漸層與陰影產生器
邊預覽邊建立漸層與盒狀陰影,然後複製 CSS 程式碼。
漸層
可使用 2 到 5 個色標,輸出時會依位置由小到大排序。
預覽
產生的 CSS
盒狀陰影
最多可使用 4 層陰影。
預覽
產生的 CSS
CSS 漸層與陰影產生器使用說明
變更任何值後,預覽與 CSS 程式碼會立即更新。滿意結果後,按下「複製 CSS」並貼到您的樣式表中。
限制
- 顏色只接受 #RGB、#RGBA、#RRGGBB 或 #RRGGBBAA 形式的十六進位值,開頭的 # 可以省略。
- 超出範圍的數字會被設為最接近的允許值。角度為 0–360,位置與不透明度為 0–100,偏移與擴散為 -200 到 200,模糊為 0–200。
- 數字最多採用 2 位小數。
- 放射狀漸層一律是從中心向外擴散的圓形。
常見問題
我的輸入會傳送到伺服器嗎?
不會。所有計算都在此瀏覽器中進行,您的輸入內容與結果既不會被儲存也不會被上傳。重新載入後會回到起始值。
變更色標順序會改變結果嗎?
輸出的 CSS 一律從最小的位置開始排序。位置相同的色標會保留您輸入的順序。
不透明度如何套用?
若陰影顏色在 8 位數十六進位值中帶有 alpha,會乘以不透明度(%)並以 rgba() 輸出。若不透明,則以 6 位數十六進位值輸出。