Ctrl K
CSS 生成器 · 使用说明
把写死的阴影、圆角、渐变、裁剪路径和过渡动画改成拖参数：box-shadow 支持多层叠加并逐层调模糊、扩散、颜色与透明度，圆角四个角可分别设置，渐变支持任意角度与色标位置，clip-path 内置常用形状，生成的代码带注释说明每层含义。参数改动实时预览，所见即所得，复制出去就是能直接用的 CSS。全部计算在浏览器本地完成，样式值不会上传。
示例
输入
阴影 · 3 层 · 主色 #0ea5e9 40%
输出
box-shadow: 0 1px 2px rgba(14,165,233,.24), 0 8px 24px rgba(14,165,233,.32);
如何使用
- 在上方切换阴影 / 圆角 / 渐变 / 裁剪 / 过渡五种生成器
- 拖动滑块或填入数值调整参数，阴影可点「+」增加层级
- 在预览卡片上直接查看效果
- 点「复制 CSS」拿走代码，或下载为 .css 文件
小贴士
- 阴影多层叠加时，上层阴影画在上方，建议先调环境光（较大模糊、较低透明度）再加主体阴影
- clip-path 的百分比与像素混用时以第一个单位为准，尽量统一
- 过渡动画生成器可同时输出 transition 与 @keyframes 两段代码
常见问题
生成的阴影会传到服务器吗？
不会。所有参数解析和 CSS 拼装都在浏览器本地完成，没有任何网络请求，你输入的颜色值与尺寸不会离开设备。
和直接手写 box-shadow 有什么区别？
手写多层阴影容易在偏移量、模糊半径和透明度之间反复试算，这个工具把每层拆成独立参数行，改一层不影响其他层，并给出可读的注释。
能生成 CSS 变量吗？
可以在阴影颜色等位置使用 var(--xxx)，工具不会替你改写已填内容，会原样保留你输入的变量引用。
预览里的效果和浏览器实际渲染一致吗？
预览就是一段真实的内联样式，浏览器渲染什么就是什么；差异只会出现在你还没填颜色时（未填则使用默认灰色），填了就会与你给的值一致。
想先确认这段 CSS 有没有兼容性问题？
生成后可以粘进 CSS 兼容性检查，那里会标出需要厂商前缀或已废弃的写法。