CSS 渐变生成器
创建精美的线性、径向和圆锥 CSS 渐变，实时预览效果。选择颜色、调整色标，即时复制 CSS 代码。
实时预览 一键导出 CSS 精选预设 100% 浏览器端
实时预览
0%100%
100%100%
CSS 输出
.element {
background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
}预设库
CSS 渐变生成器特性
为您的网页项目打造精美渐变所需的一切。
实时预览
调整颜色、色标和方向时，立即看到渐变效果更新。
一键导出 CSS
复制生成的 CSS 渐变代码，可直接粘贴到样式表中。
精选预设
从 12 个手工制作的渐变预设中选择，快速开始您的设计。
100% 浏览器端
不向任何服务器发送数据，一切在您的浏览器中本地运行。
渐变使用场景
CSS 渐变在现代网页设计中无处不在。
网页背景
为 Hero 区域、页面背景和分隔区创建引人注目的背景效果。
图片遮罩
在照片上叠加渐变以提升文字可读性或实现艺术效果。
UI 组件
为按钮、卡片、徽章和进度条应用渐变，增加深度和质感。
渐变文字
结合 background-clip: text 创建令人惊叹的多色渐变文字效果。
常见问题
在这里查找常见问题的解答。