分类: 开发工具
CSS 渐变生成器
生成线性或径向渐变并复制 CSS
选两三种颜色、调整角度、实时预览效果，然后复制可直接粘贴的 background-image 声明。全部在浏览器中渲染。
输出
background-image: linear-gradient(135deg, #0f7b63 0%, #1f4f7a 100%);
本页的所有处理都在浏览器中完成，不会上传任何内容。
这个工具能做什么
渐变靠眼睛判断比手写代码更快，所以本工具会在你调整参数时，把真正的 CSS 画在预览区上。可以选择带角度的线性渐变，或从中心扩散的径向渐变；需要三段过渡时再加一个中间色，最后把声明直接复制进样式表。
使用方法
- 选择线性或径向渐变。
- 选好起始色和结束色，需要时再加中间色。
- 调整角度，然后复制 CSS 声明。
隐私说明
本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。
常见问题
- 会上传任何内容吗？
- 不会。预览是浏览器绘制的 CSS 背景，声明也在页面内拼出，不会发送到服务器。
- 需要加浏览器前缀吗？
- 现代浏览器不需要。不带前缀的 linear-gradient 和 radial-gradient 已经被支持多年。
- 角度朝哪个方向？
- 在 CSS 中，0deg 是自下而上，角度按顺时针增加，因此 90deg 是从左到右，180deg 是自上而下。