CSS 渐变有哪些类型？

CSS 支持三种渐变类型：linear-gradient（线性渐变）沿直线方向过渡颜色；radial-gradient（径向渐变）从中心向外辐射渐变；conic-gradient（锥形渐变）围绕中心点旋转渐变。三种类型可以组合使用，也支持多层渐变叠加。

linear-gradient 的角度如何设置？

线性渐变的角度定义了颜色过渡的方向。0deg 表示从下到上，90deg 表示从左到右，180deg 表示从上到下，270deg 表示从右到左。也可以使用关键字如 to right、to bottom right 等。本工具支持角度滑块和方向按钮两种设置方式。

在渐变函数中添加多个颜色值即可创建多色渐变。每个颜色后可以指定位置百分比（如 #ff0000 0%, #00ff00 50%, #0000ff 100%）。通过本工具的"添加颜色"按钮可以增加颜色断点，拖动位置值可以精确控制每种颜色的分布。

CSS 渐变广泛用于：页面背景、按钮悬停效果、卡片装饰、加载动画、文字遮罩（-webkit-background-clip: text）、分隔线、阴影模拟、毛玻璃效果等。渐变不需要加载图片，性能优于背景图，且可以动态调整。

在线 CSS 渐变生成工具，支持线性渐变、径向渐变、锥形渐变，实时预览，一键复制 CSS 代码

渐变类型

方向

角度°

颜色断点

预设渐变

background: linear-gradient(to right, #ff6b6b 0%, #4ecdc4 100%);