ToolboxAgent

CSS 渐变生成器

在线 CSS 渐变生成器，支持线性渐变预览、角度调节和 CSS 代码复制。

.gradient-box {
  background: linear-gradient(135deg, #ff3300, #ccff00);
}

使用说明

  1. 1 选择两种颜色和渐变角度
  2. 2 预览渐变效果
  3. 3 复制生成的 CSS 代码

相关工具

条形码生成

在线条形码生成工具，支持CODE128和EAN-13格式，生成高质量条形码图片

Box Shadow 生成器

在线 Box Shadow 生成器，支持实时预览阴影参数并复制 CSS 代码。

颜色工具/拾色器

在线颜色拾取工具，支持HEX、RGB、HSL多格式互转，实时预览颜色效果

WCAG 颜色对比度检测

实时计算前景色与背景色的 WCAG 对比度比值，标注 AA / AAA 通过状态，并以按钮、卡片、输入框组件预览效果。支持导出 CSS 变量。

Favicon 生成器

在线 Favicon 生成器，支持上传图像后生成多尺寸网站图标并下载 PNG 文件。

在线白板/画板

在线白板画板工具，支持画笔、橡皮擦、颜色选择、笔刷粗细调节，可导出为PNG。

二维码识别/解码

上传二维码图片，自动识别并解码出文本内容，先看内容再决定是否访问，避免扫到恶意链接。

二维码生成

输入文本或链接，即时生成QR二维码图片，可下载PNG

关于此工具

CSS 渐变生成器通过可视化界面调节颜色断点、渐变方向和过渡类型，实时预览最终效果，并一键复制标准 CSS background-image: linear-gradient() 代码，省去手写渐变参数时反复调试的过程。

适用场景：网页 Banner 和 Hero 区块的背景渐变设计、按钮 Hover 效果的渐变背景、卡片阴影过渡色叠加、App 启动屏的品牌色渐变，以及在 Figma 或 PS 原型还原为 CSS 代码时精确匹配颜色过渡效果。

手写 linear-gradient 代码时，颜色的度数（angle）和色标百分比（color stop）位置很难凭直觉调准，而渐变的视觉感受与数值关系不直观。本工具通过实时预览大幅缩短「写代码—刷新浏览器—反复调整」的迭代循环。

常见问题

linear-gradient 的角度 0deg 是什么方向？ +

CSS 中 0deg 是从下到上（↑）的方向，与数学坐标系不同。90deg 是从左到右（→），180deg 是从上到下（↓），270deg 是从右到左（←）。to top、to right、to bottom、to left 是等价的方向关键词，但角度值更灵活，可以精确指定 45°、135° 等斜向渐变。

怎么生成三种或更多颜色的渐变？ +

在 linear-gradient 中，每种颜色后面可以加一个百分比位置，例如：linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #0000ff 100%)。百分比表示该颜色色标在渐变轴上的位置，不加百分比时会均匀分布。

radial-gradient（径向渐变）和 linear-gradient 有什么区别？ +

linear-gradient 是沿直线方向过渡，产生条纹状渐变；radial-gradient 是从中心点向外辐射扩散，产生圆形或椭圆形渐变效果。两者语法相似，radial-gradient 额外支持指定形状（circle/ellipse）和中心位置。

渐变背景在 Safari 上显示不正常怎么处理？ +

旧版 Safari（iOS 12 以下）需要 -webkit- 前缀：-webkit-linear-gradient()。现代 Safari（iOS 13+）已完整支持无前缀的标准语法。如果需要兼容旧设备，建议在 CSS 中同时写入带前缀和不带前缀两个版本，让浏览器自动选择。

渐变和图片背景能叠加使用吗？ +

可以。CSS background-image 属性支持多层背景，用逗号分隔。例如：background-image: linear-gradient(rgba(0,0,0,0.5), transparent), url('photo.jpg'); 前面的渐变层会覆盖在图片上方，常用于为图片添加半透明遮罩以便显示上方的文字。