CSS 生成器

使用指南

从六类生成器中选一个——圆角、盒阴影、文字阴影、背景、渐变或变换——然后拖动控件调参。实时预览随手势即时更新，代码面板始终显示当前生效的 CSS 规则。四个圆角可独立调节，盒阴影支持 inset 内阴影，渐变可选线性或径向，变换可组合旋转、缩放、位移。满意后一键复制 CSS，或下载为文件。

为什么使用此工具

可视化 CSS 生成器省掉了「查语法—改数值—刷新看效果」的循环：不用背 box-shadow 各参数的顺序，拖到满意直接把标准 CSS 粘进样式表。适合快速出原型、按设计稿精确还原样式，也适合学习——预览即时响应，每个参数改了什么一目了然。输出是纯 CSS，不依赖任何框架。

常见问题

这个 CSS 生成器能生成哪些样式？

六类：border-radius（四角可独立调节）、box-shadow（含 inset 内阴影）、text-shadow、background（颜色及背景图的位置/平铺/尺寸）、线性与径向渐变、transform（旋转、缩放、位移）。

生成的 CSS 可以直接用在项目里吗？

可以。输出为标准 CSS，无任何框架依赖——粘进样式表、styled-components 或行内样式均可。

支持内阴影（inset）吗？

支持。在盒阴影生成器中勾选 inset，阴影会绘制在元素内部。

能生成线性和径向渐变吗？

都能。选择渐变类型，线性渐变可设方向，调整颜色后 background 规则实时更新。

工具免费吗？

免费，无需注册，全部在浏览器本地运行。