CSS渐变生成器

这款CSS渐变生成器让你可视化设计渐变背景并复制代码。选择渐变类型，添加颜色，把色标拖到合适位置并设置角度，实时预览和CSS会同步更新。满意后，复制CSS或导出为SCSS、SVG或PNG图片。

如何制作渐变

1. 选择线性、径向或锥形。
2. 设置颜色，并按需添加任意数量的色标。
3. 拖动色标，或以百分比输入精确位置。
4. 线性和锥形渐变可设置角度（90°从左到右，180°从上到下）。
5. 复制生成的代码或导出。

没有灵感？从预设开始，或点击Random立即获得新组合，并把喜欢的渐变保存下来以后使用。

渐变类型说明

• 线性：颜色沿某个角度的直线过渡。linear-gradient(90deg, #6366f1, #ec4899)
• 径向：颜色从中心点以圆形或椭圆向外扩散。radial-gradient(circle, #fde68a, #f97316)
• 锥形：颜色围绕中心旋转，类似色环或饼图。conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red)

导出格式

• CSS：可直接粘贴的background属性。
• SCSS：以变量形式写入样式表。
• SVG：用于设计工具和插画的矢量文件。
• PNG图片：用于不支持CSS的场合，例如幻灯片和社交帖子。

好看渐变的技巧

• 使用相邻色过渡更顺滑。红和绿这样的对比色在中间可能变成浑浊的灰色，加一个中间色标即可避免。
• 保证文字可读：在文字背后最亮和最暗的位置检查对比度。
• 硬色标：把两个色标放在同一位置可得到清晰分界，适合做条纹。
• 克制更显专业：同一色相的两个相近色调，比彩虹色更沉稳。

所有现代浏览器都无需前缀即可支持线性、径向和锥形渐变。要搭建整套配色？使用配色方案生成器，并用CSS阴影生成器增加层次感。