Tool Hub

陰影產生器

疊加多層 box-shadow 或 filter:drop-shadow,提供即時預覽

疊加多層陰影以建立深度效果。實心元素使用 box-shadow (支援 inset 與 spread);透明圖形 (PNG、SVG) 使用 filter:drop-shadow。調整每層時即時預覽更新。

陰影層

預覽

CSS
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15);

使用方法

  1. Choose between box-shadow and drop-shadow mode using the segmented control。
  2. Adjust offset X, offset Y, blur, spread, and color for the first shadow layer。
  3. Click '+ Layer' to stack multiple shadows and configure each one independently。
  4. Preview the combined effect on the live shadow preview box。
  5. Copy the generated CSS declaration from the output section and paste it into your stylesheet。

範例

  • Setting offsetY=4, blur=12, spread=0, color=rgba(0,0,0,0.15) produces a standard card shadow: box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15)。
  • Adding a second layer with offsetY=1, blur=3 and color=rgba(0,0,0,0.08) creates a layered depth effect popular in material-style UI。

生產環境使用前請驗證輸出。無擔保 — 參見 條款.