为什么这页值得收藏

CSS 的效果不难，难在参数：阴影叠几层、缓动曲线怎么调、毛玻璃兼容前缀怎么写。25 款生成器把参数变成滑块，复制即用。

设计师和前端都有同一本账：想要的效果都实现过，但每次都要重新搜。这页把站内 25 款 CSS 生成器一次收齐，按效果类型分组。每款的用法一致：拖面板、看预览、复制代码。没有安装，没有账号，效果全部在浏览器里本地算出来。

布局与尺度：先把骨架摆正

  • 网格系统生成器：选 12/16/24 列，输出列宽、沟距与 CSS Grid 代码，改版式和起新稿都从这里开始。
  • 间距计算器：定一个基准单位，自动推导 4/8pt 系的间距刻度，“随手写的 13px"这种数字从此消失。
  • 宽高比计算器：算尺寸比例并给出 aspect-ratio 写法，响应式图片容器不再靠 padding-top 黑魔法。
  • EM断点生成器：px 断点换算成 em，浏览器缩放时断点不跑位，这是响应式规范里最常被忽略的一条，详见《响应式设计完全指南》。
  • 设计规范检查器：把页面的间距、字号、颜色贴进去，检查是否符合设计系统一致性，交付前先过一遍。

布局的"正路"写法（Grid 与 Flex 怎么分工），配着《CSS Grid 与 Flexbox 布局指南》看效果更好。

渐变与文字效果

  • CSS渐变生成器：线性、径向、锥形三种渐变可视化调色，角度与色标随便拖，输出标准 background 代码。
  • 渐变文字生成器：标题字用渐变，background-clip: text 的关键两行它替你配对，改颜色只改色标。
  • 文字阴影生成器：多层 text-shadow 叠加，霓虹、立体、复古字效逐层调，一层一个滑块。

阴影与边框

  • CSS阴影生成器：box-shadow 与 text-shadow 双模式，配合常见” elevation 层级"示例，卡片阴影不再抄来抄去。
  • 内阴影生成器：专做 inset 内阴影，凹陷、内发光、拟物按键的质感靠它。
  • CSS边框生成器：圆角、虚线、图片边框集中调节，border-image 这种几乎没人记得语法的属性，直接生成。
  • 圆角生成器：8 个角分开设置，异形圆角（叶子形、水滴形）实时预览，输出简写顺序也不容易写错的那种。

动画与缓动

  • CSS动画生成器：关键帧时间轴可视化编辑，实时预览并生成 @keyframes 全套代码。
  • 贝塞尔曲线编辑器：拖 cubic-bezier 控制点，动画观感随拖随变，调完把数值贴进 transition。

滤镜、遮罩与变换

  • CSS滤镜生成器：blur、brightness、contrast、saturate 逐条滑，滤镜链顺序直接影响结果，面板里所见即所得。
  • CSS背景滤镜生成器：毛玻璃核心属性，带 Safari -webkit- 前缀一起出。
  • CSS遮罩生成器：渐变遮罩、图片遮罩做淡出边缘和不规则裁切，比多层 opacity 干净得多。
  • 混合模式工具：16 种 mix-blend-mode 并排对比预览，叠字、叠图选模式不再逐个试。
  • CSS变换生成器：rotate/scale/skew/translate 分轴调节，变换顺序与原点（transform-origin）的影响看得见。
  • CSS裁剪路径生成器：多边形、圆形、椭圆可视化拖点裁剪，异形卡片和图片容器就靠这一行。

现成组件：不止代码，直接是组件

  • 玻璃拟态生成器：模糊、透明度、描边、底色四个参数出玻璃卡，含 Safari 兼容的完整 CSS。
  • 骨架屏生成器：拼装加载骨架，脉冲与扫光两种动画，输出纯 CSS 的 HTML 代码，复制进项目即可。
  • 网页按钮生成器：渐变、阴影、hover 效果一次配好，生成可直接投产的按钮 CSS。
  • 开关组件生成器：纯 CSS 无 JS 的 Toggle，基于 checkbox 实现，小表单场景够用且零依赖。
  • CSS计数器生成器：counter-increment 自动编号，步骤条、章节号、嵌套列表编号都写得出来。

常见问题

生成的 CSS 兼容性怎么样？

以现代浏览器为目标，常用场景已考虑前缀：玻璃拟态与背景滤镜会输出 -webkit-backdrop-filter，Safari 表现一致。需要覆盖极老浏览器的项目，复制后自查一下 caniuse 即可。

这些生成器和直接写代码比，优势在哪？

三点：一是参数空间可探索——阴影透明度 0.08 和 0.12 的差别，滑块拖十秒就比出来；二是语法免记忆——mask-image、clip-path、border-image 这类低频属性每次都要查；三是本地运行——设计稿相关的图片与数值不上传。写熟之后可以回来手写，但第一次见的新效果，从生成器起步最快。

小结

25 款工具按"骨架（布局）—皮肤（渐变、阴影、边框）—动作（动画、缓动）—质感（滤镜、遮罩、变换、裁剪）—成品（玻璃拟态、骨架屏、按钮、开关、计数器）“排成一条流水线：从网格定稿到组件出码，全程只在浏览器里拖滑块。下一篇讲配色、SVG、字体与图像素材的另外一批工具。