Maker Toolbox / CSS Style Lab
CSS 样式实验室
分别调整渐变、分层阴影和玻璃效果，在真实场景中预览，再带走代码。从命名预设起步，滑块微调，样式所见即所得。
渐变
背景渐变 · linear / radial / conic
颜色停靠点2 / 5
渐变卡片
复制 CSS 或 Tailwind 类名，把预览中的渐变直接用于你的背景、按钮和卡片。
查看详情开启噪点时会生成叠加的 data URI 噪点图层；颜色停靠点最多 5 个。
01 / 选择模块
渐变适合背景、封面底色和按钮；分层阴影让卡片和按钮更接近真实光照；玻璃拟态适合叠在图片或彩色背景上的卡片。
02 / 从预设开始调
先挑一个接近的命名预设，再用滑块微调。玻璃拟态请切换不同预览背景，观察文字对比度估算，必要时提高底色不透明度。
03 / 带走代码
复制 CSS 或 Tailwind 类名到你的项目，也可以下载自包含 HTML 示例离线对照。玻璃代码包含 -webkit- 前缀。Liquid Glass 需分别复制样式和必需的 SVG，页面中已标明放置位置；下载 HTML 已包含两部分。
样式定好了，让它动起来
把这里调好的渐变和阴影应用到元素之后，可以用站内的 CSS 动画生成器添加入场或循环动效；也可以浏览 HTML 动画作品寻找组合灵感。
常见问题
怎样在线生成 CSS 渐变代码？
从命名预设起步或自行添加颜色停靠点，选择线性、径向或锥形并调整角度，然后复制生成的 CSS；使用 Tailwind 时切换到 Tailwind 标签复制类名。开启颗粒噪点会生成叠加的噪点图层。
box-shadow 怎么调才自然？
单个阴影的模糊是均匀衰减的，容易显得生硬。把层数调到 4 到 6 层，近层深、远层浅，模拟真实光照的渐变过渡；阴影颜色选带品牌色倾向的深色（染色 40% 到 70%）比纯黑更自然。
玻璃效果在我的页面上不显示模糊怎么办？
backdrop-filter 只作用于元素正后方的像素，玻璃元素背后需要有实际内容或背景；这里生成的代码包含 -webkit- 前缀以照顾旧版浏览器。祖先元素的 opacity、filter 等属性会影响背景滤镜的作用范围，可把玻璃卡片移到独立的层级测试。
玻璃上的文字对比度要注意什么？
玻璃背后的内容变化会改变文字与背景的对比度。预览下方提供粗略估算，正文文字建议达到 4.5:1；不够时提高底色不透明度或更换背景，发布前请在真实页面上复核。
Liquid Glass 效果在哪些浏览器可用？
边缘折射依赖 backdrop-filter 叠加 SVG 位移滤镜，是实验性效果，当前已在本机 Chrome 验证；Firefox、Safari 及旧版本需自行实测。CSS 或 Tailwind 样式与必需 SVG 分别复制，SVG 放进页面 body。若显示异常，关闭折射重新复制基础毛玻璃样式，或下载完整 HTML 对照。