轻工具

CSS 渐变生成器

可视化生成线性/径向渐变，实时预览并复制 CSS 代码。

渐变类型
颜色停靠点（2–5 个）
操作
操作
操作
实时预览
CSS 代码 

      
    

    
把这段代码粘贴到任意元素的样式里即可使用，本工具不依赖任何第三方库。

  






  
使用说明

  
    
    
  1. 选择渐变类型：线性（linear）沿指定方向过渡，径向（radial）从中心向外圆形扩散。
    2. 
    
  2. 线性渐变时可拖动角度滑块（0–360°）调整方向；切换为径向后角度滑块会自动隐藏。
    3. 
    
  3. 为每个颜色停靠点设置色值与位置百分比，可通过「添加停靠点」增加到 5 个，或删除到最少 2 个。
    4. 
    
  4. 预览区会实时呈现渐变效果，满意后点击「复制」获取多行格式的 CSS 代码，粘贴进样式表即可。
    5. 
    
  5. 缺少灵感时点击「随机配色」，自动生成一组和谐的渐变颜色。
    6. 
  






  
常见问题

  

    生成的 CSS 代码兼容性如何？
    
linear-gradient 与 radial-gradient 是 CSS 标准语法，Chrome、Edge、Firefox、Safari 等所有现代浏览器及主流移动浏览器均原生支持，无需再写 -webkit- 前缀。

  

  

    为什么径向渐变没有角度滑块？
    
径向渐变从中心向外呈圆形扩散，视觉效果由中心点与形状决定，而不是角度。本工具采用 circle at center 的标准写法，因此切换到径向时会隐藏角度滑块。

  

  

    停靠点的位置可以乱序填写吗？
    
可以。CSS 允许停靠点按任意位置排列，浏览器会按位置自动排序渲染；预览与生成的代码始终一致，您也可以利用这一点做回跳式渐变效果。

  

  

    随机配色是怎么生成的？
    
以一个随机色相为基准，按固定间隔派生出一组 HSL 颜色，并把饱和度与亮度控制在适合做渐变的区间，同时把停靠点均匀分布，因此每次的结果都比较和谐耐看。

  




          
          

    
使用步骤
  1. 选择线性或径向类型
    点击「线性」或「径向」决定渐变方式：线性沿一个方向过渡，径向从中心向外扩散。切换到径向时角度滑杆会自动隐藏。
  2. 拖动角度滑杆定方向
    线性渐变下拖动 0-360 度的角度滑杆改变过渡方向，预览区实时跟随。0 度自下而上，90 度自左向右，180 度自上而下。
  3. 增删并调整颜色停靠点
    每个停靠点可改颜色与位置百分比（0-100）。点击「添加停靠点」最多加到 5 个，「删除」按钮可减回最少 2 个。
  4. 复制生成的 CSS 渐变代码
    满意后点击「复制」拿到多行 CSS，直接粘进任意元素的样式即可生效。这是标准语法，无需加 -webkit- 前缀。

    
工具详细介绍
CSS 渐变生成器把 linear-gradient 与 radial-gradient 的手写过程变成可视化操作。用滑杆定角度，用停靠点控制颜色与位置，实时预览与生成的代码严格一致。输出都是标准 CSS 语法，Chrome、Edge、Firefox、Safari 及主流移动浏览器原生支持。不需要第三方库或浏览器前缀，粘贴即可使用。
适合给网页头部横幅、按钮、卡片背景与海报快速定调。初学者也可以边学边试 CSS 渐变语法，拖动一次角度滑杆，就能直观理解角度参数的含义。随机配色按钮取一个随机色相，按固定间隔派生一组 HSL 颜色，并均匀分布停靠点。

    
原理与背景
CSS 渐变的角度指过渡朝向的方位：0deg 向上，按顺时针递增，因此 90deg 朝右、180deg 朝下。这与数学里逆时针为正的极角方向相反，是新手最容易混淆的地方。预览区与角度滑杆实时联动，拖动几次就能建立方位感。to top right 这类关键字同样合法，工具统一输出数值角度，便于精确复现与存档。停靠点位置不必递增，乱序时浏览器会自动按位置排序。把相邻两个停靠点设成同一百分比，就能得到硬边分色。
渐变是浏览器直接绘制的矢量效果，不产生图片请求，随窗口缩放也保持清晰，没有位图放大后的模糊。代价落在绘制路径上：把渐变做成动画，或铺在很长的滚动区域里，会增加重绘开销。静态的横幅、按钮与卡片背景可以放心使用，五个停靠点最终也只是一条 background 声明，代码体积几乎可以忽略。

    
典型使用场景
  1. 横幅底衬避免死板
    用主色的两个邻近深色做线性渐变铺头部，比大块纯色更有层次。再叠一层向下加深的同方向渐变，白色标题落在任何位置都可读。
  2. 按钮顶部模拟受光
    浅色到主色的两停靠渐变放在按钮上，模拟顶部受光的立体感，比纯色按钮精致，也无需切图。主题色更换时，渐变会跟着自动更新。
  3. 课堂上演示语法结构
    讲 CSS 时现场拖角度滑杆、增删停靠点，学生对照预览与生成的代码理解每个参数的作用。几分钟就能建立直觉，比静态幻灯片直观。

    
使用技巧
  • 停靠点位置不必递增，乱序时浏览器会自动排序，还能借此做出硬边或循环过渡效果。
  • 把两个相邻停靠点设成相同百分比，就能得到硬边分色，而不是平滑过渡的柔和渐变。
  • 径向渐变没有角度概念，外观由中心点与形状决定，所以切换到径向后角度滑杆自动隐藏。

    
注意事项
  • 透明停靠点要手写补充
    工具的停靠点只有颜色与位置。做淡出到透明的效果时，把复制的代码里对应颜色改成 rgba 或 transparent，再微调位置，其余部分保持不变。
  • 径向默认正圆且居中
    生成的 radial-gradient 中心在元素正中。想让焦点偏离中心，需在代码里补 circle at 30% 20% 一类定位参数，预览不会自动跟随，改完要自己对照确认效果。
  • 半透明边框会透出渐变
    背景默认铺到边框下面，搭配半透明边框时渐变会透出来，显得发脏。必要时把 background-clip 设为 padding-box 隔开两者，边框颜色就干净了。

  

          
相关工具