CSS 渐变生成器

可视化创建 CSS 渐变

渐变能为按钮、首屏、卡片和背景增添层次与色彩，且无需加载任何图片。但手动编写代码意味着要凭空猜测角度和百分比，还要一遍遍刷新页面看效果。这款 CSS 渐变生成器让你可以通过实时预览可视化地设计渐变，并生成兼容所有现代浏览器、干净且可直接复制的 CSS 代码。

功能特点

• 三种渐变类型：线性渐变（linear）、径向渐变（radial，圆形或椭圆）和圆锥渐变（conic）。
• 最多 8 个颜色节点，支持拖拽调整位置。
• 角度滑块：用于调整线性和圆锥渐变的角度。
• 预设与随机按钮：快速获取设计灵感。
• 纯色后备方案：生成的 CSS 代码中包含纯色背景（fallback）。
• 一键复制代码。

使用 CSS

将代码粘贴到你需要设置样式的元素规则中：

.hero {
  background: #0ea5e9;
  background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}

在 CSS 中，渐变属于图像，因此你也可以将它们用于 background-image，用逗号分隔来叠加多个渐变，或者与照片结合使用：例如 background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg); 可以将背景图片调暗，从而确保上方的白色文字清晰可读。

设计技巧

• 保持柔和。 两种相邻的色调（如蓝色到紫色、橙色到粉色）比对比色看起来更平滑、更现代。
• 检查对比度。 如果文本位于渐变背景上，请确保它在两端都清晰可读——可以使用 颜色转换器 测试颜色，它会显示对比度。
• 从品牌图片中提取颜色，可以使用 图片拾色器。
• 增加立体感，使用 阴影生成器 为卡片和按钮添加阴影效果。