颜色工具
CSS 渐变色生成器
创建美观的CSS线性、径向和锥形渐变，带多色停止、角度控制和不透明度支持。复制即用CSS。
gradientcsscolorgeneratorlinear gradientradial
CSS Gradient Generator
#1
%
#2
%
#3
%
Preview
CSS Code
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #db2777 100%);
What is CSS 渐变色生成器?
CSS渐变色生成器是一款可视化设计工具，创建生产就绪的linear-gradient()、radial-gradient()和conic-gradient() CSS函数，带交互式颜色停止控件、角度调整和不透明度操作。CSS渐变使浏览器直接渲染的平滑颜色过渡成为可能，无需图片文件— 它们比背景图片加载更快，任何分辨率都能无限缩放，并可使用CSS过渡进行动画。然而，手动编写具有精确停止位置和不透明度调整的多色渐变语法很难手写。本生成器提供可视化渐变轨道，您可以通过单击添加无限的颜色停止，左右拖动停止以调整位置，调整每个停止的不透明度滑块以获得透明效果，为每个过渡选择中点位置以倾斜颜色混合，并切换渐变类型：线性（带360度角度控制）、圆形/椭圆径向（带焦点定位）、锥形角度渐变（带起始角度）。输出不仅包括单行background属性，还包括传统浏览器的供应商前缀（-webkit-、-moz-）、非支持浏览器的HEX/RGB回退，以及可选的分层渐变组合（渐变加图案叠加）。浏览50多个预设渐变库，从日落灵感的暖渐变到科技感霓虹灯和玻璃态友好的半透明渐变，以获取即时灵感。
When to Use CSS 渐变色生成器
用于设计Hero区域背景、按钮样式、卡片装饰、渐变边框和文本、CSS艺术项目、营销落地页，或深色模式颜色过渡。
How to Use CSS 渐变色生成器
选择渐变类型（线性、径向、锥形）。在渐变条上单击添加颜色停止，拖动定位，使用不透明度滑块。调整角度或焦点。复制最终CSS（带供应商前缀）或浏览预设。