使用可视化编辑器创建精美的线性、径向和锥形渐变。添加多个颜色停止点并即时生成CSS代码。
从渐变类型按钮中选择线性、径向或锥形。实时预览立即更新。
使用颜色选择器和位置滑块定义您的颜色。点击「添加色标」添加更多颜色,或点击垃圾桶图标删除。使用上/下箭头重新排序色标。
对于线性和锥形渐变,拖动角度滑块(0°–360°)控制渐变方向。径向渐变不使用角度。
点击「复制CSS」将background属性复制到剪贴板,或将渐变导出为SVG文件。您也可以使用分享按钮发送一个可重现您渐变的链接。
点击「随机化」生成随机角度的双色渐变,或点击「清除」将所有设置重置为默认值。
每个色标定义一个颜色和0%到100%之间的位置。浏览器根据CSS渐变规范计算相邻色标之间的平滑过渡。您可以添加任意数量的色标来创建复杂的多色效果。
工具使用您选择的角度生成CSS linear-gradient()。颜色沿直线从起点混合到终点。更改角度会旋转渐变方向。
径向渐变使用radial-gradient(circle)产生从中心向外的圆形颜色过渡。锥形渐变使用conic-gradient()从设定的角度开始围绕中心点旋转颜色——适用于饼图、色轮和装饰效果。
导出为SVG时,工具将您的色标转换为SVG渐变元素(linearGradient或radialGradient),并将其打包成一个独立的SVG文件,可在设计工具中使用或嵌入网页。
您的渐变类型、角度和色标被编码到页面URL中。分享此URL可让任何人在其浏览器中打开完全相同的渐变,无需手动重新创建。
您可以创建三种类型:沿直线混合颜色的线性渐变、从中心点向外呈圆形辐射的径向渐变,以及像色轮一样围绕中心点旋转颜色的锥形渐变。
Saved Presets is a Supporter feature.
Tool History is a Supporter feature.
Tool Notes is a Supporter feature.