渐变生成器

用当前项目色板生成可复制的 CSS 渐变
Gradient 生成可用的渐变背景 linear-gradient
色标
调整颜色和位置,生成稳定的渐变结果
CSS 输出
复制后可直接用于网页或设计系统变量

        

CSS渐变生成器使用说明

CSS渐变生成器,基于当前色板生成线性、径向和锥形渐变,实时预览渐变效果,支持多色停靠点调节,一键复制background-image CSS代码。 渐变效果基于当前色板实时渲染,调整任意一个停靠点或角度都能立刻在预览区看到变化。

适合给网页 Hero 区、按钮或背景快速生成一版渐变代码,锥形渐变对做仪表盘指针和加载动画尤其好用。

常见问题

  • 怎么做 CSS 渐变? 从色板选颜色,选择线性、径向或锥形,工具实时预览并给出可复制的 background-image CSS。
  • 支持哪些渐变类型? 线性、径向、锥形渐变,每种都可调角度或位置,并支持多个色标。
  • 为什么渐变中间发灰? 色相相距很远的两色在 sRGB 里会经过灰区。加一个中间色标,或选更接近的色相,能让过渡更干净。