CSS 單層陰影預覽器

比較固定卡片的內外陰影與淺深背景。

互動處理需要啟用 JavaScript。以下使用方式、限制與常見問題可直接閱讀;檔案只在你的瀏覽器處理。

CSS 單層陰影預覽器使用指南

使用固定卡片預覽單層 CSS 陰影,調整位移、模糊、擴張、色彩及透明度,並複製宣告。

如何使用

  1. 輸入陰影位移、模糊及擴張數值。
  2. 設定 HEX 色碼、透明度及內外陰影,切換背景比較。
  3. 複製 CSS 宣告並於實際頁面核對。

格式與限制

  • 位移與擴張限 -100–100 px,模糊限 0–100 px,透明度限 0–1。
  • 僅支援單層陰影與 #RGB/#RRGGBB 色碼;實際頁面背景與裁切可能改變外觀。
  • 運算在本機進行,離開頁面即清空。

輸出內容

可複製的單層 box-shadow CSS 宣告。

常見問題

可以產生多層陰影嗎?

不行。此工具僅預覽並輸出一層陰影。

檔名與內容只在你的瀏覽器處理,不傳到伺服器。原始檔不覆蓋,離開工具前請先匯出需要的結果。