免费 CSS 渐变生成器 — 创建线性、径向与圆锥渐变

使用这个免费的在线渐变生成器，设计精美的 CSS 渐变。选择线性、径向和圆锥渐变类型，自定义颜色和角度，立即复制 CSS 代码。

什么是 CSS 渐变？

CSS 渐变是通过 CSS 中的 background 属性创建的两个或多个颜色之间的平滑过渡。渐变消除了对图像文件的需求，减少了页面加载时间，允许完全响应式、与分辨率无关的背景。

CSS 渐变主要有三种类型：

线性渐变 沿着直线过渡，由角度或方向定义。
径向渐变 从中心点向外辐射，创建圆形或椭圆形图案。
圆锥渐变 围绕中心点进行旋转过渡，类似于色轮。

如何使用此渐变生成器

选择渐变类型 — 在控制面板顶部选择线性、径向或圆锥渐变。
设置方向 — 对于线性和圆锥渐变，使用滑块或快速选择按钮调整角度。
自定义径向选项 — 对于径向渐变，选择形状（圆形或椭圆形）和大小关键词。
编辑颜色停止点 — 点击颜色选择器更改每个停止点的颜色。拖动位置滑块调整每个颜色的出现位置。
添加或删除颜色 — 使用“添加颜色”按钮添加更多停止点（最多 8 个），或点击 X 删除一个停止点（最少 2 个）。
尝试预设 — 点击任何预设色块加载现成的渐变。
复制 CSS — 点击“复制 CSS”将完整的 background 属性复制到剪贴板。

关键功能

功能	优势
三种渐变类型	线性、径向和圆锥 — 支持所有 CSS 渐变模式
实时预览	调整设置时实时查看渐变更新
最多 8 个颜色停止点	创建复杂多色渐变并精确定位
角度控制	滑块 + 快速选择按钮（0°–315°）
径向形状与大小	圆形/椭圆形形状与四个 CSS 大小关键词
一键预设	六种精选渐变预设，快速开始
复制 CSS 代码	一键复制生产就绪的 CSS 到剪贴板
不发送数据	所有操作在浏览器中完成 — 无服务器、无追踪

渐变类型对比

属性	线性	径向	圆锥
方向	角度（0–360°）	形状 + 大小关键词	起始角度
模式	直线	从中心点的圆形或椭圆形	旋转扫面
最佳用途	背景、横幅、按钮	聚光灯、球体、抽象艺术	饼图、色轮、时钟
CSS 函数	`linear-gradient()`	`radial-gradient()`	`conic-gradient()`

实际应用场景

网站背景

用微妙的渐变替代平铺颜色，打造现代、专业的页面。135° 线性渐变搭配相近颜色，增加深度而不分散注意力。

按钮和 CTA

使用鲜艳的渐变使行动号召按钮脱颖而出。使用 180°（从上到下）渐变创建自然的光影效果。

英雄区块

使用多色渐变创建引人注目的英雄横幅。结合三种或更多颜色打造独特的品牌风格。

叠加层和卡片

在图片上应用半透明渐变，确保文字可读性同时保持视觉吸引力。

数据可视化

使用圆锥渐变创建简单的饼图、进度环或色轮，无需 JavaScript 或 SVG。

创建更佳渐变的技巧

限制颜色数量：使用 2-3 种颜色打造简洁专业的设计。更多停止点可以使用，但需要仔细调整。
使用相近色系：创建微妙渐变（如浅蓝到深蓝）时使用相似色，创建大胆渐变时使用互补色。
匹配布局角度：180° 适合垂直区块，90° 适合水平条。
在暗色和亮色主题中测试：在白色背景上看起来很好的渐变可能需要在暗色模式中调整。
使用 background-size 和 background-repeat：将小渐变平铺成图案。
结合透明度：使用 rgba() 颜色创建与底层内容融合的渐变。

理解 CSS 渐变语法

一个基本的线性渐变：

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

一个带形状和大小的径向渐变：

background: radial-gradient(circle farthest-corner, #667eea 0%, #764ba2 100%);

一个圆锥渐变：

background: conic-gradient(from 0deg, #667eea 0%, #764ba2 50%, #667eea 100%);

所有现代浏览器都支持这些渐变类型，无需厂商前缀。

常见问题解答

我可以在 CSS 渐变中使用多少种颜色？

CSS 支持任意数量的颜色停止点。此工具允许最多 8 个用于实际使用。在真实项目中，2-4 个停止点最为常见。

线性渐变和径向渐变有什么区别？

线性渐变沿着指定角度的直线过渡颜色。径向渐变从中心点向外以圆形或椭圆形过渡颜色。

CSS 渐变在所有浏览器中都有效吗？

是的。所有现代浏览器（Chrome、Firefox、Safari、Edge）都完全支持 linear-gradient、radial-gradient 和 conic-gradient，无需厂商前缀。

可以动画化 CSS 渐变吗？

CSS 不能直接使用过渡动画在渐变值之间切换。但你可以使用 background-position 动画渐变位置，或在支持的浏览器中使用 CSS @property 自定义属性动画。

如何制作透明渐变？

使用带有 alpha 通道的 rgba() 或 hsla() 颜色值。例如，rgba(102, 126, 234, 0.5) 会生成该颜色的半透明版本。

此工具会存储我的渐变数据吗？

不会。所有渐变生成完全在您的浏览器中完成。不会将任何数据发送到服务器。

渐变生成器