跳至主要內容
Lizely

CSS 陰影生成器

設計一個符合標準的 CSS 箱陰影，並複製一個確定性的宣告，無需外部程式碼產生。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.在顯示的限制範圍內調整水平與垂直偏移、模糊、擴充套件、顏色、不透明度以及內縮選項。
  2. 2.檢視樣本卡片，並閱讀下方精確產生的宣告內容。
  3. 3.將 CSS 複製至目標選擇器中，並在不同主題、尺寸、焦點狀態及瀏覽器中測試實際元件表現。

關於CSS 陰影生成器

CSS 陰影生成器會產生一個 CSS 陰影宣告，並在樣卡上顯示效果。設定水平與垂直偏移、模糊半徑、擴散半徑、六位數色彩、不透明度，以及可選的內嵌行為。預覽與序列化的程式碼會在瀏覽器中本機更新；不會將 CSS、色彩選擇或剪貼簿內容傳送至伺服器。

輸出遵循 CSS 背景與邊框中的 box-shadow 元件模型。會先輸出可選的內縮，接著是水平偏移、垂直偏移、模糊半徑、擴充套件半徑，以及 rgba 顏色。產生的字串可直接貼入元素的樣式規則中，該元素支援 box-shadow 屬性。

水平與垂直偏移範圍為 -200 至 200 像素。正值的水平偏移會將外層陰影向右移動，負值則向左移動；正值的垂直偏移會向下移動，負值則向上移動。對於內縮陰影，相同的偏移會影響視覺上的內縮方向。

模糊範圍從零到 200 像素，且不能為負值。零值會產生生硬的邊緣，較大的值則會使過渡更柔和並擴充套件可見範圍，但不會改變明確的擴充套件值。瀏覽器渲染會因像素密度、轉換、縮放、合成以及元素形狀略有差異。

擴充套件範圍為 -100 至 100 像素。正值擴充套件會在模糊前擴大陰影形狀；負值則會收縮。過度負值的擴充套件可能導致外層陰影難以或完全無法看見。擴充套件與模糊是獨立的，儘管兩者都會影響視覺範圍。

顏色控制使用六位數十六進位顏色，並將其紅、綠、藍三通道轉換為十進位的 rgba 元件。不透明度接受從零到 100 百分比，並以從 0 到 1 的 alpha 值序列化，四捨五入至最多三位小數。不透明度為零的陰影雖然語法上仍存在，但實際上是不可見的。

內縮會將陰影從外層滴落陰影轉為畫在元素邊框內的陰影。適用於按壓控制元件、凹陷面板、內部高亮與深度提示。此生成器僅產生一個陰影層。CSS 支援逗號分隔的多層陰影，但層的組合與排序則有意在本小工具中不處理。

視覺樣張僅將產生的值作為內聯樣式使用於本機預覽。複製的輸出為純文字，例如：box-shadow: 4px 8px 16px 0px rgba(0, 0, 0, 0.25);。不會產生樣式標籤、選擇器、HTML 片段、瀏覽器字首、或 JavaScript。

現代瀏覽器通常支援未加字首的 box-shadow。本工具不會加入過時的 -webkit- 或 -moz- 字首、偵測瀏覽器目標、執行 autoprefixer、或測試生產樣式表。它也不會產生 text-shadow、filter: drop-shadow()、多重抬升識別字串、Tailwind 類別、設計系統變數，或動畫關鍵幀。

強烈的陰影可能降低可讀性，使元件看起來脫離情境，造成錯誤的層級感，或在複雜背景上表現不佳。請檢查明暗主題、關閉與聚焦狀態、高對比設定、減少透明度偏好等情境下的對比，並實際檢視裝置渲染結果。陰影應強化結構，而非單獨承擔核心資訊。

為確保穩定使用，建議從小偏移開始，模糊半徑大於偏移值，擴充套件為零或極小，不透明度也應保持低。預覽時應選擇與目標情境相似的背景。複製 CSS，貼入目標規則中，並在多種尺寸下檢查實際元件效果。此生成器不會修改專案檔案，亦不會在重新載入後記憶設定。

方法與來源

驗證偏移值在 ±200 px 內，模糊值在 0–200 px 內，擴散值在 ±100 px 內，不透明度在 0–100% 內，以及六位數十六進位色彩；將負零標準化；將 RGB 色道轉換為十進位；將 alpha 圓整至三位小數；以確定性 CSS 順序序列化可選內嵌後的四個像素長度與 rgba 色彩；在本機預覽上顯示該精確值；提供純宣告文字供剪貼簿複製；不嵌入瀏覽器支援表或多重陰影解析器。

常見問題

模糊與擴充套件的差異在哪裡？
擴充套件會在模糊之前改變陰影的形狀，而模糊則控制其邊緣的柔和程度。
我可以建立內嵌陰影嗎？
可以。啟用「內縮」選項，即可將陰影置於元件邊框內。
工具會產生多個以逗號分隔的陰影嗎？
不會。它會刻意一次產生一個有邊界的陰影層。
是否包含瀏覽器字首？
不會。輸出使用當前未加字首的 CSS 屬性，並不會執行針對瀏覽器的字首工具或自動補上字首。

相關工具

開發者工具 使用指南

查看全部