什麼是 CSS GlassMorphism 產生器？
CSS GlassMorphism Generator 是 Frosted-Glass UI 樣式的視覺編輯器，其中半透明的表面模糊了它後面的任何內容。 您可以使用滑桿調整背景模糊、填充透明度、飽和度、色調和角半徑，在色彩繽紛的背景上觀看預覽更新，並複製它產生的確切 CSS。
GlassMorphism 依賴背景濾鏡屬性，它將模糊應用於元素背後的內容，而不是元素本身。 結合半透明背景、髮際線邊框和柔和的陰影，它產生了現代作業系統普及的分層玻璃外觀。 手動正確平衡是繁瑣的，因此此工具管理每個值並輸出一個乾淨、可複製的區塊。
一切都在您的瀏覽器中運行。選擇 Frosted、Dark 或 Vibrant 等預設,微調滑桿,然後複製 CSS - 包括 -webkit 前綴的背景過濾器以獲得更廣泛的支援。沒有帳戶,沒有上傳,一旦頁面加載,它就會保持離線工作。
這種效果取決於兩個屬性一起工作,如果缺少其中一個屬性,它就會默默地失敗。背景濾鏡會模糊元素後面的任何內容,因此它需要部分透明的背景顏色來顯示:在完全不透明的情況下,什麼也看不見,而且根本沒有背景,表面就會消失。它背後還需要一些值得模糊的東西,這就是為什麼效果看起來像普通背景上的平板,並且在照片上變得生動起來。兩個實際成本。背景模糊是合成成本較高的東西之一,特別是在大面積或滾動過程中。半透明表面上的文字具有對比度,該對比度會隨著下面經過的任何內容而變化,因此它可以針對一個背景進行對比度檢查,而針對另一個背景進行對比度檢查。
作為玻璃態 CSS 產生器,它從 Frosted 預設開始,該預設的複製區塊為: 背景:rgba (255, 255, 255, 0.2);背景過濾器:模糊(10px)飽和(120%);與 -webkit-backdrop-filter 再次相同的值;邊框半徑:16px;邊框:1px 實體 rgba(255、255、255、0.18);盒影:0 8px 32px rgba (0, 0, 0, 0.12)。點擊"黑暗",背景會變更為 rgba(15、23、42、0.25),並帶有 12px 模糊,這是在淺色照片上使用的版本。
如何使用 CSS GlassMorphism 產生器？
選擇預設
從磨砂、淺色、深色、充滿活力或微妙的開始，以獲得平衡的玻璃外觀，然後對其進行改進以匹配您的設計。
調光玻璃
拖曳背景模糊、透明度和飽和度滑桿，選擇色調，然後設定角落半徑。 預覽更新以色彩繽紛的背景為生，因此模糊是可見的。
切換邊框
打開或關閉髮際線邊框。 微妙的 1 像素半透明白色邊框出售玻璃邊緣，尤其是在較深的背景下。
複製 CSS
複製產生的區塊 - 背景、背景過濾器(帶有 -webkit-fixter)、邊框半徑、邊框和陰影 - 並將其貼到您的卡片或面板上。
主要特點
背景模糊控制
專用的模糊滑桿驅動背景過濾器,它會凍結元素後面的任何東西 - 玻璃效果的核心
全表面造型
透明度、飽和度、色調、角落半徑和可選的髮際線邊框，讓您在精確的玻璃中撥入
現場預覽
預覽位於彩色漸變上,因此您可以看到背景模糊工作,並在編輯時立即更新
前置輸出
輸出包括背景濾鏡和 -webkit-backdrop-filter 前綴，因此該效果適用於 Safari 和其他 WebKit 瀏覽器
Frequently Asked Questions
Related Tools
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!