CSS渐变生成器
以可视化方式设计线性、径向或锥形渐变,一键复制生成的CSS代码。
background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%);
如何使用 CSS渐变生成器
- 选择渐变类型,并为线性或锥形渐变设置角度。
- 添加颜色节点,拖动每个节点到你想要的位置。
- 将生成的CSS代码直接复制到你的样式表中。
关于 CSS渐变生成器
以可视化的方式设计CSS渐变,效果满意后即可复制代码。首先选择渐变类型:线性、径向或锥形。对于线性和锥形渐变,你可以将角度设置在0到360度之间,用来控制颜色流动或扫过的方向;径向渐变则是从中心向外扩散绘制成一个圆形。实时预览会随着你的操作即时更新,因此你是根据真实效果来设计,而不是靠猜测。
你可以添加任意数量的颜色节点,最少需要两个。每个节点都有一个取色器和一个0到100%的位置滑块,系统会自动按位置对这些节点排序,因此无论把新颜色添加在哪个位置,它都会自动归入正确的顺序中。这正是实现平滑多色渐变或鲜明色带效果的方法,具体取决于你把各节点的位置设置得有多接近。
输出结果是一段可直接粘贴使用的标准CSS渐变语法的background声明,直接复制到你的样式表中即可使用。它只生成一个background属性,不会添加浏览器厂商前缀,因为现代浏览器渐变已不再需要这些前缀。如果需要在元素下方添加阴影,请查看盒阴影生成器;若要微调某个颜色值,十六进制转RGB转换器会很实用。
常见问题
线性、径向和锥形渐变有什么区别?
线性渐变沿着一条直线混合颜色,方向由你设置的角度决定。径向渐变从中心向外以圆形扩散颜色。锥形渐变则像色轮一样围绕中心点旋转扫过颜色,同样由角度控制。
我可以使用多少种颜色?
数量不限,最少两种。每种颜色都是一个节点,拥有各自的取色器和0到100%的位置设置。添加更多节点可以打造多色渐变效果,若将节点位置设置得靠近,则可以形成鲜明的色带。
位置滑块有什么作用?
它用于设置每种颜色在渐变中的位置,从起点的0%到终点的100%。各节点会自动按位置排序,因此把一个节点移过另一个节点时,顺序会自动正确调整。位置相近会形成硬边界,位置分散则会形成柔和的渐变过渡。
这个渐变需要浏览器厂商前缀吗?
不需要。该工具输出的是标准的、无前缀的CSS代码,因为当前的浏览器无需前缀即可支持渐变。像-webkit-或-moz-这类旧写法,对于这里生成的渐变类型已不再必要。
复制按钮具体给我的是什么内容?
是一条使用标准渐变语法的CSS background声明,可直接粘贴到你的样式表中使用。它只设置一个background属性,不会生成完整的规则或类,因此你可以将其放入你正在设置样式的任意选择器中。