CSS GENERATOR
CSS 生成器，调一调就能复制代码。
可视化调整阴影与渐变，右侧实时预览，满意后一键复制 CSS 代码。全部在浏览器本地完成。
阴影 box-shadow
渐变 linear-gradient
本页处理在浏览器本地完成
这个工具能做什么？
不少 CSS 属性（尤其 box-shadow）参数较多、容易拼错。本工具用滑块与取色器可视化调整，实时生成可直接粘贴的 CSS，省去反复试错；生成的代码一键即可复制到剪贴板。
常见问题
box-shadow 的六个值分别是什么？
依次是：X 偏移（左右，正数向右）、Y 偏移（上下，正数向下）、模糊半径（越大越柔，0 是硬边）、扩散半径（正数变大、负数收缩）、颜色。前三个最常用，写 `box-shadow: 2px 4px 8px rgba(0,0,0,.2)` 就是一个柔和阴影。
生成的多重阴影怎么叠加才自然？
用两层：一层贴近元素、模糊小且透明度高（模拟接触阴影），一层偏移大、模糊大且透明度低（模拟环境阴影）。比如 `0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.12)`。层数超过三层通常显脏。
为什么复制出来的代码显示不出来？
常见三个原因：① CSS 被放在了没有样式的标签内，style 标签必须直接放在页面里；② 缺少属性结尾的分号；③ 用了逗号分隔颜色时格式不对。生成器输出的是标准语法，若仍不生效先用浏览器的 computed 面板看属性是否被其他规则覆盖。
示例与注意事项Example & notes
一个例子A worked example
调圆角、阴影与渐变，右侧实时生成可粘贴的 CSS，省掉手写试错的来回。Tune radius, shadow and gradient while the CSS updates live on the right, removing trial-and-error.
注意事项Things to watch
- box-shadow 层数不要太多，多层阴影在低端设备上有明显性能开销。Keep shadow layers few — stacked shadows cost performance on low-end devices.
- px 与 rem 混用会让等比缩放失效，建议统一单位。Mixing px and rem breaks proportional scaling; pick one.
- 深色主题下阴影要降低不透明度，否则看起来发脏。On dark themes lower the shadow opacity or it looks muddy.
相关问答More Q&A
能一键复制代码吗？Is there a copy button?
可以，代码块右上角有复制按钮，复制的是纯 CSS。Yes — the copy button in the corner copies clean CSS.
能生成 Tailwind 类名吗？Can it output Tailwind classes?
目前输出原生 CSS，便于直接落库或加进样式文件。It outputs plain CSS, which drops straight into a stylesheet.