为落地页首屏、服务介绍区域和活动横幅快速创建美观的渐变背景代码。
Developer Design Utility
CSS Gradient 生成器
通过调整颜色、方向、类型和颜色停止位置，生成 linear-gradient、radial-gradient、conic-gradient CSS background 代码，并实时预览效果。
Gradient 代码生成
快速生成 linear、radial、conic 渐变 CSS background 代码。
实时预览
修改颜色、角度和位置后会立即反映到预览背景中。
复制与下载
可复制选择器代码、CSS 变量和 background 属性，也可保存为 CSS 文件。
Gradient Type
Linear
Angle
135°
Color Stops
0% / 100%
Output
background
STEP 1
Gradient 设置
组合渐变类型、颜色、角度和目标选择器，创建所需的 CSS 背景代码。
选择 Linear、Radial 或 Conic 渐变。
0°
135°
360°
作为 Linear / Conic 渐变的方向和旋转基准。
起始颜色，可输入 HEX 颜色代码。
结束颜色。在需要对比度的 UI 中建议检查亮度差异。
0%
0%
100%
0%
100%
100%
选择生成结果中使用的 CSS 选择器。
仅在选择自定义时使用。
生成 CSS 变量代码时使用的变量名。
同时输出 :root 变量和选择器应用代码。
Live Preview
CSS Gradient
调整颜色和方向，实时查看背景预览效果。
Type
linear
Angle
135°
Colors
2
STEP 2
推荐预设
常用于按钮、卡片、Hero 背景和缩略图的渐变组合。
基础 UI 渐变
强调 / CTA 渐变
特殊类型渐变
STEP 3
待机中
生成结果
可将以下代码用于 CSS 文件或 style 属性。
请选择设置后点击生成 CSS 代码按钮。
帮助
什么是 CSS Gradient 生成器？
CSS Gradient 生成器是一款设计工具，无需手写 CSS 渐变语法，也能轻松创建背景渐变代码。你可以在实时预览中生成并检查 linear-gradient、radial-gradient 和 conic-gradient 代码。
使用方法
- 从 Linear、Radial、Conic 中选择要使用的渐变类型。
- 调整两种颜色、停止位置、角度或旋转基准，并查看实时预览。
- 设置目标 CSS 选择器，并选择是否生成 CSS 变量代码。
- 复制生成的 background 代码，或下载 CSS 文件后应用到项目中。
实时比较适合 CTA 按钮、价格卡片和强调模块的颜色组合。
使用 CSS 变量可在多个组件中复用同一渐变，并在后续统一调整颜色。
如何使用生成的 CSS
复制生成的 CSS 代码并粘贴到样式表中即可使用。如果启用 CSS 变量选项，渐变值会保存到 :root 中，并可通过 var() 在多个选择器中复用。
设计建议
- 如果想要柔和自然的渐变，建议组合亮度接近的颜色。
- CTA 按钮或强调区域适合使用对比更强的颜色组合。
- 在渐变背景上放置文字时，必须检查可读性和颜色对比度。
- 如果同一渐变会用于多个组件，建议使用 CSS 变量管理。
搜索此工具的用户常见需求
搜索 CSS Gradient Generator、linear-gradient generator、radial-gradient generator、conic-gradient generator、CSS background generator 或 gradient CSS maker 的用户，通常希望为网站、落地页、按钮、卡片和博客缩略图创建可复用的背景代码。
linear-gradient 和 radial-gradient 有什么区别？
linear-gradient 的颜色沿直线方向变化，而 radial-gradient 则以圆形方式扩散。linear 常用于区块和按钮背景，radial 更适合柔和的强调效果。
可以把渐变应用到文字上吗？
可以。配合 background-clip: text 和透明文字颜色，就可以将渐变应用到文本上。但在小屏幕上应特别检查可读性。
为什么要使用 CSS 变量选项？
CSS 变量便于在多个组件中复用同一个渐变。管理设计系统或之后需要统一修改颜色时也很方便。
渐变会影响无障碍访问吗？
可能会。如果在渐变背景上放置文字或按钮，需要确认整个渐变区域内的前景色对比度都足够。