无需登录 数据私有 本地保存

CSS渐变生成器 - 在线渐变色代码可视化生成

前端设计 生成器 CSS 渐变 生成器
33
0
0
0
渐变预览
拖拽色标调整位置 0% – 100%
CSS 代码
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #ff9ff3 100%);
渐变类型
渐变角度
135°
颜色停止点
最少2个停止点，最多7个
精选预设
常见问题与知识点

CSS渐变是一种在元素背景中实现平滑颜色过渡的技术。它由浏览器原生渲染，无需图片，性能极佳。支持线性渐变（linear-gradient）和径向渐变（radial-gradient）两种类型，可设置多个颜色停止点实现复杂效果。

角度表示渐变方向。0deg 从下到上，90deg 从左到右，180deg 从上到下，270deg 从右到左。常用角度如 135deg（左上到右下）和 45deg（左下到右上）能产生动感的斜向渐变。

颜色停止点定义了渐变中某个颜色出现的位置，用百分比表示（0%起点，100%终点）。例如 #ff6b6b 30% 表示该颜色在渐变30%处达到纯色。你可以在色带上拖拽圆形手柄来直观调整位置，或使用滑块精确控制。

farthest-corner：渐变延伸到最远的角（默认，覆盖整个元素）。closest-corner：延伸到最近的角。farthest-side：延伸到最远的边。在圆形/椭圆形状下视觉效果各异，建议切换尝试观察变化。

完全可以！点击复制按钮即可获得标准CSS语法，直接粘贴到你的样式表中。主流浏览器（Chrome、Firefox、Safari、Edge）均已全面支持CSS渐变，无需添加浏览器前缀。可用于 background、background-image 等属性。

当然！渐变不仅用于背景，还可用于 border-image（边框渐变）、mask-image（遮罩）、text-fill-color（文字渐变效果）等。结合 background-size 和 background-repeat 还能创建条纹、网格等复杂图案。
🔧 相关工具