Developer Design Utility
CSS Gradient 生成器
通过调整颜色、方向、类型和颜色停止位置，生成 linear-gradient、radial-gradient、conic-gradient CSS background 代码，并实时预览效果。
Gradient 设置
组合渐变类型、颜色、角度和目标选择器，创建所需的 CSS 背景代码。
选择 Linear、Radial 或 Conic 渐变。
作为 Linear / Conic 渐变的方向和旋转基准。
起始颜色，可输入 HEX 颜色代码。
结束颜色。在需要对比度的 UI 中建议检查亮度差异。
选择生成结果中使用的 CSS 选择器。
仅在选择自定义时使用。
生成 CSS 变量代码时使用的变量名。
同时输出 :root 变量和选择器应用代码。
调整颜色和方向，实时查看背景预览效果。
推荐预设
常用于按钮、卡片、Hero 背景和缩略图的渐变组合。
基础 UI 渐变
强调 / CTA 渐变
特殊类型渐变
生成结果
可将以下代码用于 CSS 文件或 style 属性。
请选择设置后点击生成 CSS 代码按钮。
帮助
什么是 CSS Gradient 生成器？
CSS Gradient 生成器是一款设计工具，无需手写 CSS 渐变语法，也能轻松创建背景渐变代码。你可以在实时预览中生成并检查 linear-gradient、radial-gradient 和 conic-gradient 代码。
主要 Gradient 类型
- linear-gradient：颜色沿直线方向变化的渐变，常用于 Hero 区块、卡片和按钮背景。
- radial-gradient：从中心或某个焦点向外呈圆形扩散的渐变，适合柔和背景效果和强调区域。
- conic-gradient：颜色围绕中心点旋转分布的渐变，可用于徽章、图表、装饰性圆形效果。
推荐使用场景
- 落地页 Hero 区块背景
- 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 变量便于在多个组件中复用同一个渐变。管理设计系统或之后需要统一修改颜色时也很方便。
渐变会影响无障碍访问吗？
可能会。如果在渐变背景上放置文字或按钮，需要确认整个渐变区域内的前景色对比度都足够。