🔲 CSS陰影生成器
幾秒鐘內獲得您的CSS陰影代碼——無需安裝、無需帳號、無需網路。拖動滑塊設定每個陰影層的偏移、模糊、擴展、顏色和透明度，實時預覽會立即更新，然後複製即用的CSS。
預覽
隱私優先設計. 此工具完全在您的瀏覽器中運行 — 您輸入的內容不會上傳或儲存，而且它可以在離線狀態下使用。
關於
這個工具完全在您的瀏覽器中運行，使用純JavaScript——您的設計永遠不會離開您的設備。您可以疊加多個陰影層來創建深度效果、新月形、光暈效果或微妙的卡片提升效果。每一層都支持內嵌陰影，以實現內光暈或按下按鈕的外觀。輸出是標準CSS，可以直接放入任何樣式表、框架或設計令牌中。
如何使用
- 點選『+ 添加陰影』來創建你的第一層陰影。
- 使用偏移X、偏移Y、模糊、擴散和透明度滑桿來調整每個陰影。切換『內嵌』來產生內陰影效果。
- 點選顏色選項來選擇任何陰影顏色。當你調整每個控制項時，即時預覽會自動更新。
- 添加更多層來實現複雜的多陰影效果，如新機能或堆疊光暈。
- 點選『複製CSS』來複製完整的box-shadow宣告，並將其貼到你的樣式表中。
常見問題
- 這個CSS盒影生成器是免費的嗎？
- 是的，完全免費。不需要帳號、試用期或隱藏費用，只需打開網頁並開始生成陰影。
- 它可以在離線環境下使用，不需要網際網路連接嗎？
- 是的。這個工具完全在瀏覽器中運行，不需要伺服器請求。網頁載入後，你可以斷開網際網路連接，它仍會完美運作。
- 我的設計數據是私密的嗎？有什麼數據會被上傳嗎？
- 沒有任何數據會被上傳。所有陰影設定都在瀏覽器中本地處理，並僅保存在瀏覽器的localStorage中。數據永遠不會離開你的設備。
- 我可以在同一個CSS規則中層疊多個陰影嗎？
- 可以。根據需要點選『+ 添加陰影』多次。工具會將所有層疊在一起，生成一個逗號分隔的box-shadow值——非常適合新機能、光暈效果或多方向深度。
- 如何建立內陰影效果？
- 在任何陰影圖層上勾選「內陰影」選項。內陰影會出現在元素邊界內，適用於按鈕按下狀態或內發光效果。生成的CSS會自動包含「inset」關鍵字。
- 此工具會上傳我的資料嗎？
- 不會。所有運作都在您的瀏覽器中進行，因此您的資料永遠不會離開您的設備 — 頁面載入後，它甚至可以在離線狀態下使用。