实时预览创建CSS渐变并导出代码
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);bg-gradient-to-br from-[#667eea] to-[#764ba2]CSS渐变生成器是一款免费在线工具,可帮助您通过可视化界面轻松创建线性渐变和径向渐变效果,实时预览并一键导出CSS代码。无论是网页背景、按钮样式还是装饰性元素,渐变都能为设计增添现代感和层次感。 渐变(Gradient)是CSS3引入的强大特性,它允许在两种或多种颜色之间创建平滑过渡。线性渐变(linear-gradient)沿一条直线变化,可以设置角度和方向;径向渐变(radial-gradient)从中心点向外扩散。通过调整色标的位置和数量,可以创造出从简约到复杂的各种视觉效果。 本工具提供直观的操作方式:拖动色标调整位置,旋转角度改变方向,还内置了多种精美预设供您直接使用或作为起点进行修改。生成的CSS代码兼容所有现代浏览器,可直接复制到项目中使用。所有操作完全在浏览器中完成。
线性渐变语法: background: linear-gradient(角度, 颜色1 位置1, 颜色2 位置2, ...); 示例: background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%); 径向渐变语法: background: radial-gradient(shape, 颜色1 位置1, 颜色2 位置2, ...);