渐变生成器
使用直观的可视化编辑器创建漂亮的CSS和Tailwind渐变
类型
角度
135°Presets
颜色节点
%
%
.element {
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
}linear-gradient(135deg, #6366f1 0%, #ec4899 100%)常见问题
线性、径向和锥形渐变有什么区别？
线性渐变沿直线过渡颜色。径向渐变从中心点向外辐射。锥形渐变围绕中心点旋转颜色，类似色轮。
如何在Tailwind CSS中使用渐变？
切换到Tailwind标签页，复制生成的类名。直接粘贴到任何Tailwind项目中——标准颜色无需额外配置。
可以添加两个以上的颜色节点吗？
可以——点击'添加颜色'添加任意数量的节点，然后拖动或输入精确位置，精确控制每种颜色在渐变中出现的位置。
渐变可以在React或其他框架中使用吗？
完全可以。CSS输出适用于任何可以应用样式的地方，包括React内联样式、Vue、Svelte、纯HTML或任何CSS样式表。