🧊

CSS 玻璃拟态生成器

一键生成 CSS 或 Tailwind 玻璃拟态效果，支持实时预览与代码复制。

设置

效果预设

玻璃底色#ffffff

透明度

模糊度

饱和度

圆角半径

边框

边框透明度

阴影

阴影透明度

背景设置

背景预设

图片链接

Glassmorphism

Beautifully frosted glass effect

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);

关于此工具

CSS 玻璃拟态生成器帮助开发者快速实现流行的磨砂玻璃视觉效果。通过调节背景透明度、模糊半径 (backdrop-filter)、色彩饱和度以及边框样式，您可以直观地设计出富有层次感的 UI 组件。工具内置多种风格预设，支持实时预览，并自动生成兼容的 CSS 或 Tailwind CSS 代码，适用于卡片、导航栏与弹窗设计。

功能特点

🧊 玻璃质感：精准调节透明度与模糊度
🎨 预设风格：内置磨砂、透明、鲜艳及深色等多种预设
📐 细节控制：支持圆角、饱和度、边框及阴影的精细调节
🚀 多框架支持：一键生成标准 CSS 及 Tailwind CSS 代码
⚡ 实时预览：支持自定义背景图片或颜色，即时查看效果
🔒 纯前端：所有操作在本地完成，保障隐私安全

CSS 玻璃拟态生成器

设置

背景设置

Glassmorphism

关于此工具

功能特点

相关工具

CSS 渐变生成器

CSS 阴影生成器

颜色选择器

CSS Grid 生成器

NanoID 生成器

ULID 生成器

UUID 生成器

JSON 转 Python Pydantic

JSON 对比

NDJSON 转换

JSON Schema 生成器

JSON 结构视图