加载中...
加载中...
渐变色生成完整使用教程:线性渐变、径向渐变、多色停调节、预设模板、CSS代码导出,手把手教你创建漂亮渐变背景。
渐变色是现代网页设计的常用元素,按钮背景、卡片装饰、页面 Banner 都离不开它。在线渐变生成器支持线性和径向渐变,可自由调节颜色、角度和位置,一键导出 CSS 代码。
本教程将教你如何选择渐变类型、调节颜色停点、使用预设模板,快速生成可用的渐变 CSS。
切换「线性渐变」或「径向渐变」。线性渐变沿直线过渡,径向渐变从中心向外扩散。
点击颜色条上的色标修改颜色,拖动色标位置调节过渡区域。可添加多个色标实现多色渐变。
线性渐变可拖动角度盘或输入角度值(0-360°),径向渐变可切换圆形/椭圆形。
点击预设卡片一键应用热门渐变方案。满意后点击「复制 CSS」获取可直接使用的 CSS 代码。
线性渐变沿直线方向过渡(可调角度),径向渐变从中心点向四周扩散。按钮/条常用线性,圆形装饰常用径向。
点击颜色条下方的「+」按钮添加新色标,每个色标可独立设置颜色和位置。
标准渐变 CSS 兼容所有现代浏览器。如需兼容 IE,工具可自动生成带前缀的兼容代码。
现在就去使用这个工具
立即使用 渐变颜色生成器