CSS 玻璃形態發生器

CSS GlassMorphism Generator 是 Frosted-Glass UI 樣式的視覺編輯器，其中半透明的表面模糊了它後面的任何內容。 您可以使用滑桿調整背景模糊、填充透明度、飽和度、色調和角半徑，在色彩繽紛的背景上觀看預覽更新，並複製它產生的確切 CSS。

GlassMorphism 依賴背景濾鏡屬性，它將模糊應用於元素背後的內容，而不是元素本身。 結合半透明背景、髮際線邊框和柔和的陰影，它產生了現代作業系統普及的分層玻璃外觀。 手動正確平衡是繁瑣的，因此此工具管理每個值並輸出一個乾淨、可複製的區塊。

一切都在您的瀏覽器中運行。選擇 Frosted、Dark 或 Vibrant 等預設,微調滑桿,然後複製 CSS - 包括 -webkit 前綴的背景過濾器以獲得更廣泛的支援。沒有帳戶,沒有上傳,一旦頁面加載,它就會保持離線工作。

這種效果取決於兩個屬性一起工作,如果缺少其中一個屬性,它就會默默地失敗。背景濾鏡會模糊元素後面的任何內容,因此它需要部分透明的背景顏色來顯示:在完全不透明的情況下,什麼也看不見,而且根本沒有背景,表面就會消失。它背後還需要一些值得模糊的東西,這就是為什麼效果看起來像普通背景上的平板,並且在照片上變得生動起來。兩個實際成本。背景模糊是合成成本較高的東西之一,特別是在大面積或滾動過程中。半透明表面上的文字具有對比度,該對比度會隨著下面經過的任何內容而變化,因此它可以針對一個背景進行對比度檢查,而針對另一個背景進行對比度檢查。