CSS渐变生成器
以可视化的方式构建漂亮的 CSS 渐变——调整颜色、停止点、方向，并副本可直接使用的 CSS 代码。
颜色停止
CSS 输出
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);为什么要使用 PixConvert 渐变生成器
可视化渐变生成器，即时输出 CSS 值——无需猜测十六进制值。
线性和径向
构建任意角度的线性渐变，或构建形状和位置可配置的径向渐变。
多色停止
最多可添加 10 个可拖动定位的颜色停止点。支持所有 CSS 颜色，包括 rgba 和 hsla。
角度控制
拖动角度旋钮或输入精确的角度值。常用方向（向右、向右下）为预设方向。
实时预览
当您调整任何值时，全宽渐变预览都会实时更新。
可直接粘贴的 CSS
输出结果是一个干净的 CSS背景属性字符串，可以直接粘贴到任何样式表中。
随机化
点击“随机化”按钮，即可获得灵感——生成漂亮的随机渐变组合。
CSS渐变应用案例
渐变色在现代用户界面设计中随处可见。
英雄背景
为落地页主图部分创建丰富的背景渐变效果。
- 全页英雄背景
- 章节分隔线渐变
- 在图像上叠加渐变
按钮和卡片样式
使用微妙的渐变填充，为按钮、卡片和徽章增添层次感。
- 主操作按钮渐变
- 卡片标题强调
- 进度条填充
品牌设计
创建与品牌色调相匹配的渐变效果。
- Logo背景渐变
- 应用图标背景
- 社交媒体资产
如何创建 CSS 渐变
选择直线型、径向型或圆锥型。选择颜色并调整止动位置。设置角度或方向。
实时预览即时更新。点击“复制 CSS”即可副本可直接使用的 CSS背景值。
在线性和径向类型之间切换，并调整角度或形状——将生成的背景粘贴到样式表中。
常见问题解答
CSS渐变详解。
什么是CSS渐变？
CSS渐变是指用纯CSS定义（不包含图像）的两种或多种颜色之间的平滑过渡。渐变类型包括：线性渐变（定向渐变）、径向渐变（圆形/椭圆形渐变）和圆锥渐变（围绕中心点旋转渐变）。
我需要添加 -webkit- 前缀吗？
不，适用于现代浏览器（Chrome 26+、Firefox 16+、Safari 7+）。-webkit- 前缀仅对非常老旧的浏览器才需要。如果您需要支持 IE10 或更早版本的 Safari，请在选项中启用它。
如何创建透明渐变？
使用 rgba 颜色——例如，rgba(0, 0, 0, 0) 表示透明。要淡入透明，请将终点设置为 rgba(255,255,255,0) 表示白色到透明，或 rgba(0,0,0,0) 表示黑色到透明。
我可以在渐变中使用CSS变量吗？
是的，但是这个可视化工具生成的是十六进制/RGBA值。要使用CSS自定义属性，副本输出结果，然后手动将颜色值替换为您的变量（例如var(--color-primary)）。
哪些浏览器支持圆锥梯度？
conic-gradient 效果在 Chrome 69+、Edge 79+、Safari 12.1+ 和 Firefox 83+ 中受支持。Internet Explorer 不支持该效果。如需渐进增强的备选方案，请使用 `@supports(背景: conic-gradient(red, blue))`。