分類: 開發工具
CSS 陰影產生器
調出一個 box-shadow 並複製 CSS
調整位移、模糊、擴散、顏色與不透明度，一邊看即時預覽，一邊複製可直接貼上的 box-shadow 宣告。所有繪製都由你自己的瀏覽器完成。
輸出
box-shadow: 0px 8px 24px -4px rgba(23, 33, 28, 0.24);
本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。
這個工具能做什麼
box-shadow 依固定順序接受五個值，其中任何一個稍有變化，螢幕上的觀感就差很多，因此憑空去寫並不好受。這個工具會在你拖動滑桿時，把真正的宣告畫在預覽方塊上。還可以加上第二層更緊的接觸陰影——設計師正是用這種搭配讓元素顯得被抬起，而不是一片模糊——內陰影則把陰影翻到內側，用來表現凹陷的表面。
使用方式
- 設定水平與垂直位移、模糊與擴散。
- 選擇陰影顏色與不透明度，需要時開啟內陰影或接觸層。
- 把 box-shadow 宣告複製到你的樣式表裡。
隱私說明
本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。
常見問題
- 會上傳任何東西嗎？
- 不會。預覽是瀏覽器繪製的 CSS 陰影，宣告也是在頁面裡拼出來的。
- 擴散是做什麼的？
- 擴散在模糊之前把陰影放大或收縮。負的擴散會把陰影往內收，這正是防止柔和陰影從元素兩側漏出來的辦法。
- 為什麼要用兩層？
- 只有一層又寬又柔的陰影，看起來往往像霧。在元素附近再疊一層小而深的陰影，就有了接觸邊緣，兩層合在一起才讀得出高度。