CSS 陰影產生器 使用方法
- 1
選擇起始陰影
點選「柔和」「多層」或「高度 2」等預設範本，或直接調整預設圖層。
- 2
調整每一層
選取一個圖層，設定它的 X 與 Y 位移、模糊、擴散、顏色、不透明度和內陰影。
- 3
在你的表面上檢查
調整方塊大小、圓角與顏色，使它符合你要設計的元素。
- 4
複製 CSS
將 box-shadow 宣告或 Tailwind 類別複製到你的程式碼中。
限制與 Pro
免費使用，不需註冊：圖層數量不限、位移 −100 到 100 px、模糊最高 200 px，並提供 12 種陰影預設範本。
Pro 可移除廣告；陰影編輯器的功能在every方案中都完整提供。 查看 Pro
關於 CSS 陰影產生器
CSS 的 box-shadow 屬性可以接受一串陰影圖層，每一層都有水平與垂直位移、模糊半徑、擴散距離、顏色，以及選用的 inset 關鍵字。要做出自然的立體感，得在兩層以上的陰影之間調配這些數值，直接在樣式表裡改數字很難抓準。這個編輯器會在即時預覽的方塊上顯示拖曳滑桿後的結果，並自動寫出宣告與 Tailwind 的 shadow-[…] 類別。
你可以新增任意數量的圖層，暫時隱藏某一層來比較，也能上下移動順序（清單中的第一層畫在最上面），或切換成內陰影，用在按下去的按鈕與輸入欄位。位移範圍為 −100 到 100 像素，模糊最高 200 像素，擴散為 −100 到 100，每種顏色都有自己的不透明度。負的擴散值是現代柔和陰影的訣竅：它會把陰影收到元素底下，只在下方露出淡淡的光暈。
預覽方塊可以調整大小，並設定任意圓角、方塊顏色與背景顏色，讓你直接在實際設計的表面上判斷陰影效果，包括需要更高不透明度或彩色光暈的深色主題。
內建十二個起點：四種 Material Design 高度層級、柔和單層、五層平滑陰影、硬邊的新野獸派位移、新擬態、內陰影、彩色光暈、聚焦樣式的外框環，以及懸浮卡片。漸層在另一個分頁；文字陰影與 drop-shadow() 濾鏡不在支援範圍內。
隱私
陰影的建立與預覽都在這個頁面中完成，你的圖層只會儲存在這個瀏覽器的本機儲存空間，重新整理後仍會保留。任何設定或設計都不會傳送到伺服器。