CSS渐变生成器
通过实时预览设计精美的线性、径向和锥形CSS渐变，并一键复制代码
实时预览
渐变类型
色标
预设
CSS代码
background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);全部在浏览器中本地生成，不会向服务器发送任何内容。
关于此工具
这款CSS渐变生成器让你可视化地设计平滑的色彩过渡，并一键复制可直接粘贴的CSS。选择线性、径向或锥形渐变，添加任意数量的色标，并使用原生颜色选择器或HEX输入框微调每个色标的颜色，以及0到100%的位置。线性渐变可设置0到360度的任意角度，也可使用快捷方向按钮；径向渐变支持圆形或椭圆形状，锥形渐变则围绕中心点旋转颜色。大尺寸实时预览即时更新，让你准确看到所创建的效果。从精选预设开始，点击随机按钮获取新灵感，然后将生成的background属性复制到样式表中。一切都在浏览器本地运行，因此快速、私密且可离线使用。
使用方法
- 1 选择渐变类型——线性、径向或锥形。
- 2 添加色标，然后设置每个色标的颜色（选择器或HEX）及其0到100%的位置。
- 3 为线性和锥形渐变调整角度，或为径向渐变调整形状——也可加载预设。
- 4 查看实时预览，然后点击复制CSS，将background属性粘贴到你的项目中。
工作原理
该工具根据你的设置生成标准的CSS渐变函数。线性渐变使用linear-gradient(角度, 色标)，角度指定渐变线方向，每个色标写作颜色加百分比位置。径向渐变使用radial-gradient(形状 at center, 色标)，从中间向外扩散颜色；锥形渐变使用conic-gradient(from 角度 at center, 色标)，围绕一点旋转颜色。输出前会按位置自动排序色标，因此添加顺序无关紧要。位置会被限制在0-100%，并始终保留至少两个色标，所以生成的CSS始终有效。结果是一个普通的background声明，无需前缀即可在任何现代浏览器中使用。
常见问题
线性、径向和锥形渐变有什么区别？
线性渐变沿着由角度设定方向的直线混合颜色。径向渐变从中心点以圆形或椭圆向外扩散颜色。锥形渐变围绕中心点旋转颜色，适合饼图、色轮和角度效果。三者都是原生CSS，受所有现代浏览器支持。
我可以添加多少个色标？
你可以根据需要添加任意数量的色标；工具始终保留至少两个以保持渐变有效。每个色标都有自己的颜色和0到100%的位置。添加更多色标可创建彩虹、多色背景和平滑的多色过渡。
角度控件有什么作用？
对于线性渐变，角度设定颜色线的方向：0度向上，90度向右，180度向下，270度向左，因此你可以将混合朝向任意方向。对于锥形渐变，角度设定旋转的起始位置。你可以拖动滑块、输入精确值或使用快捷方向按钮。
生成的CSS可以直接用于生产环境吗？
可以。输出是使用原生渐变函数的标准background属性，在所有当前浏览器中均可使用，无需厂商前缀。只需复制该行并粘贴到样式表、内联样式或组件中。如果你想单独保留背景色，可将属性名改为background-image。
我的数据会被发送到任何地方吗？
不会。整个生成器使用JavaScript和CSS在你的浏览器中运行。你的颜色或渐变信息不会上传或存储在服务器上，因此该工具是私密的，即使断开网络连接也能继续工作。
相关工具与用途
将渐变生成器与颜色转换器搭配使用，可获取精确的HEX、RGB和HSL值；与对比度检查器搭配，可确保文字在渐变上仍清晰可读。设计师和开发者用它为网站和应用创建主视觉背景、按钮、卡片、徽章和装饰效果。