CSS 漸層與陰影產生器

邊預覽邊建立漸層與盒狀陰影,然後複製 CSS 程式碼。

漸層

色標 1
色標 2

可使用 2 到 5 個色標,輸出時會依位置由小到大排序。

預覽

產生的 CSS

盒狀陰影

陰影層 1

最多可使用 4 層陰影。

預覽

產生的 CSS

CSS 漸層與陰影產生器使用說明

變更任何值後,預覽與 CSS 程式碼會立即更新。滿意結果後,按下「複製 CSS」並貼到您的樣式表中。

限制

常見問題

我的輸入會傳送到伺服器嗎?

不會。所有計算都在此瀏覽器中進行,您的輸入內容與結果既不會被儲存也不會被上傳。重新載入後會回到起始值。

變更色標順序會改變結果嗎?

輸出的 CSS 一律從最小的位置開始排序。位置相同的色標會保留您輸入的順序。

不透明度如何套用?

若陰影顏色在 8 位數十六進位值中帶有 alpha,會乘以不透明度(%)並以 rgba() 輸出。若不透明,則以 6 位數十六進位值輸出。