Box Shadow CSS Generator

把腦中那個 box-shadow 直接做出來，不用猜數值，也不用一直重整瀏覽器。拖動 offset、blur、spread、顏色與不透明度，看著真實元素即時變化，然後一鍵複製乾淨的程式碼。 大多數陰影工具只是網頁，給你一層平板的陰影就沒了。這是一套原生 iOS 工作室，照著「深度」真正的運作方式設計：最多堆疊六層陰影、任何一層都能切成 inset、在淺色或深色畫布上預覽，並把同一個結果輸出成 CSS、SwiftUI 或 Tailwind 的 shadow-[...] 寫法。全部在裝置上運算，飛機上、沙發上、開會中照樣能用。 你會得到什麼 - 真實預覽元素，呈現瀏覽器實際會渲染的樣子，可切換淺色／深色畫布 - 精準滑桿：offset X、offset Y、blur 半徑、spread 與不透明度，另有色輪與六位數 hex 輸入欄 - 最多六層堆疊，可上下排序、單獨關閉或刪除，做出可信的多光源層次 - inset 內陰影，用於按壓態按鈕、凹槽與 neumorphism 表面 - 三種一鍵複製：CSS box-shadow（rgba 輸出）、串接的 SwiftUI .shadow 修飾符，或 Tailwind shadow-[...] 工具類別 - 12 組精選 preset，涵蓋 Material elevation、柔和卡片、長陰影、光暈、neumorphism 與 inset，外加你自己的收藏庫 適合誰 - 想直接拿到正確 box-shadow 程式碼、懶得再開 codepen 的前端工程師 - 要把設計稿上的陰影換算成實際數值的 UI 與產品設計師 - 需要把網頁陰影對應到 iOS 寫法的 SwiftUI 開發者 - 想搞懂 blur、spread、inset 到底在做什麼的學生與自學者 為什麼不直接用免費的網頁產生器？ 因為網頁產生器只給你一層，沒有 inset，沒有 SwiftUI 或 Tailwind 輸出，也沒地方存下你上週覺得好看的那組陰影。在這裡你可以疊層、用名稱儲存、幾個月後再叫出來重新套用——離線，就在你手上這台裝置。 隱私 不用帳號、不用註冊、沒有廣告，也不會對你的作品做任何分析。每一組陰影、preset 與收藏都只留在你的裝置上，你設計的東西不會被上傳到任何地方。 完整版權限 完整版權限（Full Access）解鎖多層陰影（最多六層）、inset 開關、SwiftUI 與 Tailwind 輸出、全部進階 preset，以及無上限的收藏庫。提供三種方案：每週訂閱、每年訂閱，或一次付費的終身買斷。免費版仍保留單層編輯與 CSS 複製。 打開 Create 分頁，把 blur 滑桿往右拉到卡片浮起來，然後按 Copy CSS。 Terms of Use (EULA): https://web-levi.web.app/terms Privacy Policy: https://web-levi.web.app/privacy-policy 有問題嗎？請聯絡 [email protected]