玻璃擬態產生器
新設計毛玻璃卡片並複製 CSS，附即時預覽。
Browser support. backdrop-filter works in all current browsers; the copied CSS includes the -webkit- prefix for Safari. Unsupported browsers fall back to the plain translucent background.
Readability. Transparency changes contrast over busy backgrounds. Raise the tint opacity and aim for a 4.5:1 text-contrast ratio so content stays legible.
Runs entirely in your browser. Nothing is uploaded.
免寫程式碼，視覺化設計毛玻璃效果
這款毛玻璃效果產生器讓你透過拖曳滑桿，直觀地打造磨砂玻璃外觀——調整模糊度、透明度、色調、飽和度、邊框與陰影，即時預覽玻璃卡片的變化。滿意後，複製精確的 CSS（含 -webkit- 前綴回退方案）、等效的 Tailwind 類別，或可直接貼上的 HTML 片段。無需猜測 backdrop-filter 的參數值，也無需安裝任何軟體——一切都在瀏覽器中完成。
毛玻璃效果（Glassmorphism）是以半透明磨砂玻璃為主題的 UI 風格，由 macOS、Windows 11 及無數現代化儀表板所推廣。它為卡片、模態框、導覽列和登入表單增添了層次感與精緻感，同時讓豐富多彩的背景透過表面隱約可見。若要手動調整這些數值，需要不斷儲存並重新整理；使用這款工具，讓你省去所有繁瑣步驟。
磨砂玻璃效果的原理
三個 CSS 屬性共同創造出這種效果。半透明的背景填充，例如 rgba(255,255,255,0.18)，讓背後的內容隱約透出。背景模糊——backdrop-filter: blur(10px)——對元素後方的內容進行模糊處理，而非元素本身的內容。細緻的邊框，如 1px solid rgba(255,255,255,0.3)，在邊緣捕捉光線。再搭配柔和的 box-shadow 和圓潤的 border-radius，整個面板便呈現出玻璃質感。
飽和度也同樣重要：在模糊效果後串接 saturate(120%) 可以提升透過玻璃滲入的色彩，賦予高質感玻璃那種生動、發光的視覺感受。這款工具公開了所有控制項——模糊半徑、色調顏色、色調透明度、飽和度、邊框寬度、邊框透明度、圓角半徑與陰影強度——讓你精確調整磨砂玻璃 CSS，無需修改任何一行程式碼。
CSS 與 Tailwind 輸出，並排呈現
切換輸出標籤頁，可將效果輸出為純 CSS、Tailwind 毛玻璃類別，或含完整 HTML + <style> 的可直接貼上片段。CSS 輸出一律包含 -webkit-backdrop-filter 前綴，確保 Safari 相容性。Tailwind 輸出使用任意值工具類別，例如 backdrop-blur-[10px]、bg-[#ffffff]/18、border-[#ffffff]/30 和 rounded-[16px]，使類別與滑桿設定精確對應——無論你偏好手寫 CSS 還是工具優先的工作流程，都能輕鬆使用。
雙輸出功能是競爭工具中最大的差距之一。Glassmorphism.com 和 Glass UI 只能匯出純 CSS，讓 Tailwind 使用者不得不手動轉換數值。UtiloKit 自動完成兩者，無論你的技術棧為何，都能直接複製進程式碼庫。
在自訂背景上預覽效果
玻璃只有在背後有豐富色彩時才能展現出玻璃質感，因此即時預覽區使用你可以控制的背景。從漸層預設中選擇——日落、海洋、極光、鮮豔和深色場景——或上傳你自己的圖片，在你將要上線的實際照片或主視覺圖上測試玻璃效果。這使得毛玻璃背景預覽效果真實而非扁平色塊，也讓你能夠針對畫面中最複雜的部分檢查文字對比度。
自訂背景上傳是 glassmorphism.com 明顯缺乏的功能。當你為特定主視覺照片設計玻璃覆蓋層時，在通用漸層上測試無法可靠地判斷可讀性。使用實際圖片可讓你在上線前發現對比度問題。
UtiloKit 與其他毛玻璃產生器的比較
大多數替代工具只提供單一背景的基本 CSS 片段。Glassmorphism.com（Michal Malewicz 的熱門工具）沒有 Tailwind 輸出、無自訂背景上傳，也無法分享連結供團隊審閱。Glass UI（glass-ui.com）同樣受限——它不能獨立控制飽和度、box-shadow 強度或色調顏色。CSS-tricks 教學和 Codepen 片段只提供靜態程式碼，每次設計師修改規格時都需要手動調整。
UtiloKit 在一個畫面上提供所有控制項：模糊度、色調顏色、色調透明度、飽和度、邊框寬度、邊框透明度、圓角半徑和 box-shadow。分享連結將所有這些數值編碼進網址，讓你能將精確的規格傳送給同事。無需帳號、無需上傳、無浮水印——直接複製並上線。
預設樣式、瀏覽器支援與可讀性
四個一鍵預設——磨砂卡片、深色玻璃、導覽列和鮮豔——為你提供強大的起始點，方便進一步精調。生成的 CSS 一律包含 -webkit-backdrop-filter 前綴，確保效果在 Chrome、Edge、Firefox 和 Safari 中正常運作，並在不支援的瀏覽器中優雅降級為純半透明填充。
由於透明度會影響對比度，請留意可讀性：將色調透明度提高到大約 25-40%，添加飽和度以平衡繁雜的背景，並目標達到 WCAG 4.5:1 的文字對比度。玻璃卡片應看起來輕盈通透，但文字絕不應難以閱讀。若在即時預覽中文字變得難以辨識，那就是你在上線前提高色調透明度的信號。
私密、即時且完全免費
無需註冊，也無需安裝任何軟體。你調整的每個數值、即時預覽，以及你放入的任何圖片，都在瀏覽器本地處理——不會有任何資料上傳至伺服器。使用複製連結按鈕與隊友分享配置，該按鈕將所有設定打包進網址。收藏此玻璃卡片產生器，當你需要毛玻璃效果時隨時取用，無需先提供電子郵件地址給任何工具。
Frequently asked questions
什麼是毛玻璃效果（Glassmorphism）？
毛玻璃效果（Glassmorphism）是一種 UI 風格，讓元素看起來像磨砂玻璃——一個半透明的面板，會對背後的內容進行模糊處理，並配以細薄的淺色邊框和柔和的陰影來增添層次感。你可以在 macOS Big Sur、Windows 11 的壓克力表面以及現代登入卡片中看到它。三個關鍵要素是：半透明背景填充、背景模糊和細微的 1px 邊框，例如 background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3)。
如何用 CSS 製作毛玻璃效果？
為元素添加半透明背景和背景模糊，然後加上細緻的邊框。一個良好的起始點是：background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.2)。關鍵在於背景填充是部分透明的，使背後的模糊效果能夠透出。拖曳上方的滑桿進行微調，然後複製精確的 CSS。
CSS 中的 backdrop-filter 有什麼作用？
backdrop-filter 對元素背後的區域應用圖形效果——最常見的是 blur()——而非元素本身的內容。因此 backdrop-filter: blur(10px) 會模糊方框後方渲染的所有內容，從而創造磨砂玻璃的外觀。你也可以串接多個濾鏡，例如 backdrop-filter: blur(10px) saturate(150%)，同時對玻璃背後的內容進行模糊並增強色彩。它只在元素本身的背景至少是部分透明的情況下才會顯示效果。
如何製作磨砂玻璃效果？
磨砂玻璃是毛玻璃效果的加強版，使用更強的模糊度和稍微不透明的色調。嘗試 background: rgba(255,255,255,0.25); backdrop-filter: blur(16px) saturate(120%); border: 1px solid rgba(255,255,255,0.4); border-radius: 16px。將模糊度提高到 14-20px，色調透明度提高到約 20-30%，使表面呈現「磨砂」感而非清透感。UtiloKit 中的磨砂卡片預設會立即為你設定這些數值，讓你可以從那裡開始調整。
backdrop-filter 在所有瀏覽器中都支援嗎？
是的——backdrop-filter 在所有現代主流瀏覽器（Chrome、Edge、Firefox 和 Safari）中均受支援。Safari 多年來一直透過 -webkit-backdrop-filter 前綴支援它，因此務必同時包含兩行：-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px)。UtiloKit 的毛玻璃產生器會自動輸出帶前綴的版本。非常舊的不支援瀏覽器只會顯示你的純半透明背景，能夠優雅降級。
為什麼我的 backdrop-filter 或毛玻璃效果無法運作？
三個常見原因：(1) 元素背後沒有任何可模糊的內容——backdrop-filter 只影響背後渲染的內容，因此請將其置於圖片或漸層之上；(2) 元素本身的背景完全不透明——使用 rgba() 填充，如 rgba(255,255,255,0.18)，讓模糊效果透出；(3) 你忘記了 Safari 所需的 -webkit-backdrop-filter 前綴。另外請注意，具有 filter、transform 或 will-change 屬性的祖先元素可能會創建包含塊，完全破壞效果。
如何在 Tailwind CSS 中實現毛玻璃效果？
將 backdrop-blur 工具類別與半透明背景和淡色邊框結合使用。例如：class="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl shadow-lg"。使用 backdrop-saturate-150 來增強背後的色彩。如需精確數值，切換上方輸出至 Tailwind 標籤頁——它會輸出任意值類別，如 backdrop-blur-[10px] bg-[#ffffff]/18 border-[1px] border-[#ffffff]/30 rounded-[16px]，與你的滑桿設定精確對應。
毛玻璃效果（Glassmorphism）和新擬態（Neumorphism）有什麼區別？
毛玻璃效果使用透明度和背景模糊，使元素看起來像是浮在內容上方的磨砂玻璃。新擬態（軟 UI）則相反：不透明的元素與頁面背景顏色相同，透過成對的明暗陰影賦予 3D 浮凸感——例如 box-shadow: 8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff。毛玻璃效果需要豐富多彩的背景才能發揮魅力；新擬態則需要扁平單色的背景才能正常運作。
應該使用多大的模糊量？
對於大多數卡片，8-16px 的背景模糊度看起來最合適。約 5-8px 適合輕盈、幾乎未磨砂的玻璃效果，10-16px 適合典型的卡片或模態框，16-25px 適合厚重的磨砂玻璃導覽列或覆蓋層。更強的模糊度應搭配稍高的色調透明度，確保文字保持清晰可讀。上方的模糊滑桿範圍從 0 到 40px，讓你能針對特定背景圖片找到最佳平衡點，無需猜測。
如何確保玻璃效果上的文字可讀？
可讀性來自於文字與模糊背景之間的對比度。將色調透明度提高到約 25-40%，使表面不那麼透明；添加 backdrop-saturate 以柔和背後繁雜的色彩；選擇對比強烈的文字顏色——在深色調玻璃上使用白色文字，或在淺色調上使用深色文字。正文文字目標達到 WCAG 4.5:1 的對比度，避免將小字體置於背景圖片顏色最豐富的部分上方。
毛玻璃效果符合無障礙設計標準嗎？
可以符合，但需要謹慎處理。透明度使對比度難以預測，因為玻璃背後的色彩不斷變化，可能導致文字低於 WCAG 4.5:1 的最低要求。使用足夠高的色調透明度（30%+），針對背景最繁雜的部分測試文字效果，不要僅依靠模糊效果來分隔內容。此外，在你的 CSS 中，針對設定 prefers-reduced-transparency 的使用者提供更不透明的備用方案。
UtiloKit 的毛玻璃產生器與 glassmorphism.com 和 Glass UI 相比如何？
Glassmorphism.com（由 Michal Malewicz 開發）提供一個快速起點，但不允許你上傳自己的背景圖片、控制飽和度或匯出 Tailwind 類別。Glass UI（glass-ui.com）同樣受限——單一背景預覽、無 Tailwind 輸出、無可分享的連結。UtiloKit 讓你放入自己的圖片、調整包括飽和度和陰影強度在內的每個參數、獲得 CSS 和 Tailwind 兩種輸出，並透過網址分享精確的配置。一切都在瀏覽器中運行，不會有任何資料上傳至伺服器。
如何在網站上添加玻璃卡片？
將容器置於背景圖片或漸層之上，然後將生成的 CSS 應用到卡片。最簡範例：為父元素設定背景，然後為子元素設定樣式：background: rgba(255,255,255,0.18); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; padding: 24px。從上方的輸出中複製現成的 HTML 片段——它包含標記和 style 區塊，可直接貼入你的頁面，無需額外設定。
可以在 iPhone 或 Android 上使用這款毛玻璃產生器嗎？
可以。UtiloKit 的毛玻璃產生器完全適配行動裝置，在 iPhone 上的 Safari、Android 上的 Chrome 以及任何現代行動瀏覽器中都能正常運作。滑桿支援觸控操作，即時預覽即時更新，從手機剪貼簿複製 CSS 或 Tailwind 輸出就像在桌機上一樣方便。由於一切都在瀏覽器中運行，不需要任何伺服器，也無需安裝任何東西——只需打開頁面即可開始設計。
可以將我的毛玻璃配置分享給隊友嗎？
可以——點擊「複製連結」按鈕，所有滑桿數值都會直接編碼進網址。將該連結分享給設計師或開發人員，他們就能打開你的精確配置：相同的模糊度、相同的色調顏色和透明度、相同的飽和度、相同的邊框設定和陰影。無需帳號，無需匯出檔案。這是 glassmorphism.com 和 Glass UI 的不足之處——兩者都不支援可分享的配置連結。
