01

渐变设置

输入颜色并选择显示方式

HEX · 例如 #0099CC

HEX · 支持 #RGB 简写

渐变方式
渐变角度90°

拖动角度或修改颜色，预览会自动更新。

02

实时预览

linear-gradient · 90°

生成的 CSSCSS
background: linear-gradient(90deg, #0099CC 0%, #7C3AED 100%);

CSS 渐变生成器

输入十六进制颜色，调整渐变角度与形状，实时生成可以直接复制的 CSS 渐变代码。

使用说明

三步完成操作

  1. 01 · 设置颜色

    选择颜色或直接输入 HEX 值，两个色标会同步更新。

  2. 02 · 调整样式

    在线性渐变中拖动角度，或切换径向渐变的圆形 / 椭圆形。

  3. 03 · 复制代码

    预览确认后复制完整 CSS，可直接粘贴到样式表中。

常见问题

使用前先了解这些

支持哪些十六进制颜色？

支持三位简写（如 #09C）和六位 HEX（如 #0099CC），输入后会自动规范为六位大写格式。

线性和径向渐变有什么区别？

线性渐变沿指定角度从一个颜色过渡到另一个颜色；径向渐变从中心向外扩散，可选择圆形或椭圆形。

颜色无效时还能复制吗？

请先修正颜色值。输入无效时会清除待复制代码，避免误用上一组颜色。