随机渐变生成器
随机生成双色或三色 CSS 线性渐变，自定义 HEX 色值和角度，实时预览并复制或下载 CSS。
请选择 0° 到 360° 的整数。0° 表示向上，90° 表示向右。
重新生成颜色时保留当前角度。修改颜色或角度后，预览和 CSS 会立即更新。
渐变预览
CSS 背景代码
.gradient {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
}如何生成随机 CSS 渐变
- 选择双色或三色渐变，并设置 0° 到 360° 的角度。
- 生成随机颜色、使用取色器，或输入自定义的 3 位或 6 位 HEX 色值。
- 确认背景预览后，复制 CSS 或下载 random-gradient.css，并将 gradient 类应用于 HTML 元素。
网页背景应用示例
- 用蓝色和紫色双色渐变设计品牌官网的首屏背景。
- 尝试三色渐变，用于演示卡片、仪表盘页眉或作品集版块。
- 保留品牌色值，调整角度，比较不同方向的背景效果。
常见问题
随机生成后还能修改渐变吗？
可以。通过文本框或取色器修改各个 HEX 色值，再调整角度。预览和 CSS 始终使用当前设置。
支持哪些颜色格式和渐变类型？
本工具生成不透明的 CSS 线性渐变，支持双色或三色，色标位置均匀分布。接受 3 位和 6 位 HEX 色值，不支持透明度、径向渐变或自定义色标位置。
输入无效的颜色或角度会怎样？
页面会显示错误提示，并清除旧预览和 CSS。修正设置前无法复制或下载，避免导出与输入不符的结果。
可以直接用在网站上吗？
可以。将 .gradient 规则复制到样式表，再为元素添加 class="gradient"。下载文件包含的规则与预览区显示的内容相同。
颜色生成和编辑均在浏览器中完成，工具不会将 HEX 色值或生成的 CSS 发送到服务器。网站仍可能加载常规广告和流量分析服务。
觉得好用？分享给同事或朋友。
点击 表示支持，或点击 提供反馈。
按 Ctrl+D 将此工具加入书签，快速回来使用。