Dev Tools
純前端檔案不上傳

box-shadow 編輯器(多層陰影 + Material elevation)

多層 CSS 陰影視覺化編輯,每層獨立調 x/y/blur/spread/color + inset。內建 Tailwind 5 個 shadow preset 與 Material Design 9 個 elevation preset。

Tailwind 預設
Material elevation
預覽
方塊顏色
背景色
陰影層(可疊加)
  • 層 1
    陰影色(支援 rgba)
  • 層 2
    陰影色(支援 rgba)
輸出格式
css
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
             0px 2px 4px -2px rgba(0, 0, 0, 0.1);
›如何使用
  1. 上方點 Tailwind preset(shadow-sm/md/lg/xl/2xl)或 Material elevation(1-24,共 9 級)套用。
  2. 右側可改 方塊顏色 / 背景色 / 圓角,讓預覽更貼近你實際的使用情境。
  3. 下方 陰影層 區可疊加任意數量的陰影,每層調 x / y / blur / spread / 色彩 / inset;點 ✕ 刪除、+ 加一層。
  4. 底部 輸出 切 3 種格式:CSS block / CSS value / Tailwind v4 任意 class。
Tips
  • 多層陰影 是現代設計的標配 — 一個淺一個深疊起來,真實感比單層強很多。Material 的每個 elevation 都是 3 層疊加(umbra / penumbra / ambient)。
  • inset 讓陰影往內陷,適合做 neumorphism 效果(我們也有專門的 neumorphism 工具)。
  • Tailwind v4 任意 class 直接吃 shadow-[...],複製即用,不用改 tailwind.config。
  • spread = 0 時會省略不輸出,讓 CSS 更乾淨。

相關工具