CSS Gradient
渐变预览
线性渐变 · 90deg
颜色节点 1
rgba(42, 123, 155, 1) 0%
颜色节点 2
rgba(87, 199, 133, 1) 50%
颜色节点 3
rgba(237, 221, 83, 1) 100%
Picker
CSS 输出
渐变预设
CSS 输出
3 Stops
background: #2a7b9b; background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
CSS 渐变生成器指南
快速生成可复制的 CSS 渐变背景
CSS 渐变生成器适合在网页、按钮、卡片、海报和运营页面中快速试出背景方案。你可以调整渐变类型、角度、颜色节点和位置，实时查看预览，并直接复制生成的 CSS 代码用于项目。
界面设计：为按钮、横幅、卡片和仪表盘背景快速试色。
前端开发：把可视化配置直接转换成 CSS background 代码。
品牌延展：围绕品牌色生成柔和或高对比度的渐变方案。
素材制作：为社交图、封面图和 Open Graph 图片准备背景。
CSS 渐变生成器常见问题
生成的 CSS 可以直接复制到项目里吗？
可以。工具会输出标准 CSS 渐变语法，你可以复制到 background、background-image 或相关样式中使用。
支持线性渐变和径向渐变吗？
支持。你可以根据页面需要选择线性或径向渐变，并调整方向、颜色和色标位置。
渐变预览和浏览器显示会完全一致吗？
预览使用浏览器原生 CSS 渲染，通常与实际页面一致。不同浏览器的抗锯齿和色彩管理可能会有细微差异。
这个工具会上传我的配色吗？
不会。渐变配置和预览都在浏览器中完成，复制代码时也不会上传你的配色内容。