⚡全部工具 💻開發者與編碼 📝文字與內容 🎨設計與色彩 🖼️圖片與多媒體 🔢數據與計算 🔒安全與密碼 📄PDF 工具 📐單位與進度轉換

CSS 陰影與玻璃擬態產生器

即時調校多層 CSS 陰影與磨砂玻璃效果，快速複製 CSS。

Shadow Layers

精選預設樣式

Preview

ALPAKIT CSS LAB 🦙

Alpa 羊駝設計卡片 100% Client-side Rendering

CSS Code

使用方式

1 開啟CSS 陰影與玻璃擬態產生器，輸入、貼上或選擇要處理的內容。
2 依需求調整頁面上的選項與格式。
3 確認即時結果，再複製或下載可用的輸出。

適合的使用情境

即時調校多層 CSS 陰影與磨砂玻璃效果，快速複製 CSS。適合日常工作、開發、學習或快速驗證時使用。

隱私與資料處理

工具在瀏覽器中運作；處理敏感資料前，仍請確認瀏覽器與裝置環境可信。

CSS box-shadow 陰影與玻璃擬態（Glassmorphism）產生器

這個工具讓你用滑桿調整 CSS 陰影與毛玻璃效果，右側卡片即時預覽，下方直接產生可以貼進專案的 CSS。在「Box Shadow」分頁中，每一層陰影都能設定水平位移、垂直位移（-50 到 50px）、模糊半徑（0 到 100px）、擴散半徑（-30 到 50px）、顏色與不透明度，並可勾選 Inset 變成內陰影。預設輸出為 box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.30);，顏色會轉成 rgba 格式。

按「新增陰影層」可以疊加多層陰影，輸出時以逗號串接，清單中越前面的陰影會畫在越上層。真實世界的陰影通常是「一層近而清楚、一層遠而柔和」，例如內建的 3D Double 範本就是 0 5px 5px 搭配 0 20px 25px 兩層低不透明度的黑色陰影，看起來比單一大陰影更自然。負的擴散值可以讓陰影比元素小一圈，常用來做卡片底部的柔和投影；Glow Light 範本則是以品牌色、0 位移與較大模糊做出發光效果。

切換到「Glassmorphism」分頁可以製作毛玻璃卡片：調整背景模糊（backdrop-filter: blur，0 到 40px）、背景色與不透明度，以及 1px 邊框的顏色與不透明度。產生的 CSS 同時包含 backdrop-filter 與 Safari 需要的 -webkit-backdrop-filter。毛玻璃的關鍵在於「背景要半透明，而且後面要有內容」：如果卡片後方只是一片純色，模糊就看不出差異，所以預覽區提供漸層與深色背景可以切換比較。

實際使用時有幾點值得注意：大範圍的 backdrop-filter 模糊在低階手機上會比較耗效能，建議只用在少數卡片或導覽列；半透明背景上的文字要留意對比度，背景不透明度太低時可以加深底色或提高文字粗細。陰影的 rgba 數值可以直接搭配 CSS 變數或 Tailwind 的任意值語法使用。所有調整都在瀏覽器中完成，不需要註冊。