跳至主要內容
Lizely

CSS 玻璃迷霧生成器

調整透明玻璃面板的驗證模糊、透明度、邊框與圓角值，然後複製可直接使用的 CSS。

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

使用方式

  1. 1.選擇一種玻璃色調和半透明填滿不透明度。
  2. 2.調整背景模糊、高亮邊框不透明度和角落半徑。
  3. 3.在內建的彩色背景上檢視面板。
  4. 4.複製 CSS 並在實際堆疊環境中進行測試。

關於CSS 玻璃迷霧生成器

CSS Glassmorphism 產生器提供一種受控方式來建立半透明面板，使其能顯示並柔和地呈現後方的內容。選擇玻璃色、背景不透明度、背後模糊效果、白色邊框不透明度以及角落半徑。預覽會將面板置於彩色背景之上，使背後效果可見，然後套用與複製的 CSS 相同的計算值。這避免了常見錯誤，即在空白背景上評估模糊效果，而瀏覽器沒有內容可供過濾。輸出包含半透明 rgba 背景、標準 backdrop-filter、某些瀏覽器版本使用的 WebKit 前置備用版本、一像素高亮邊框以及邊框半徑。

玻璃風格依賴透明度。一個完全不透明的面板可以隱藏背景並讓模糊效果無效，即使屬性有效。不透明度控制將百分比轉換為穩定的 alpha 值，而選取的十六進位顏色則轉換為紅、綠、藍三色通道。邊框不透明度是單獨計算的，因為細微的光邊通常有助於區分面板與其後方的材質。模糊效果被序列化為非負像素長度。負的模糊值在過濾語法下無效，因此工具會拒絕這些值，而不是靜默地修正它們。

backdrop-filter 屬性影響的是元素後方被繪製的像素，而不是元素本身的子元素。由不透明度、過濾、遮罩、裁剪、混合或某些 will-change 值所建立的背景根節點，可能會限制取樣的背景。因此 CSS 在這個隔離預覽中運作正常的效果，可能在複雜的堆疊上下文中看起來不同。請使用實際的背景影象、漸層或內容，在其真實父層級中測試複製的規則。如果效果消失，請先檢查透明度與背景根節點的邊界，再在沒有證據的情況下增加模糊度。

玻璃面板並非自動可讀。複雜的影象可能透過模糊仍可看見，淺色邊框也無法保證足夠的區隔。請驗證文字對比度在使用者可能遇到的所有背景下的表現。當背景過濾不支援、關閉、成本高或被輔助功能偏好覆蓋時，應提供實體或更不透明的備用方案。避免將長段正文文字疊加在不可預測的影象上。互動內容應使用邊距、合適的最大寬度，以及明確的焦點指示器。透明度應支援層級結構，而非掩蓋它。

模糊效果也會產生渲染成本，尤其是在大型表面、移動影片或巢狀過濾圖層上。請保持過濾區域受限制，並在代表性的行動硬體上測試效能。較大的模糊值不一定是更好的效果。建議從 8–16 像素和 15–30 百分比不透明度開始，然後根據最終背景進行調整。產生的 CSS 故意省略陰影、內邊距、定位和字型樣式，因為這些屬於周圍元件系統的範疇。請使用現有的設計詞彙來新增這些元素，而不是將一個面板轉換為獨立的視覺語言。

所有運算皆在瀏覽器中執行。值不會上傳或儲存，無需帳號，也無需外部套件。生成器驗證有限實用範圍與六位十六進位顏色，但無法保證瀏覽器相容性、對比度或渲染效能。複製此規則，提供備用背景，測試明暗主題、鍵盤焦點、強制顏色、降低透明度預期、響應式尺寸，以及你的使用者實際使用的精確瀏覽器。

方法與來源

驗證有限的不透明度、模糊、邊框不透明度及半徑值；將六位元組十六進位顏色轉換為 rgba；序列化標準與 WebKit 背景模糊設定；並將精確產生的屬性套用至預覽中。

常見問題

為何我的頁面上模糊效果看不見？
面板需要透明背景，且能看見其後方的像素內容；同時，backdrop-root 的邊界也可能限制取樣範圍。
玻璃迷宮效果能保證文字可讀嗎？
不會。需針對所有可能的背景對比度進行測試，必要時提供更不透明或實體的備用方案。
背景模糊會很耗資源嗎？
在大面積、移動或巢狀區域中可能會造成較高開銷。應限制表面範圍，並在代表性行動裝置上進行測試。

相關工具

開發者工具 使用指南

查看全部