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

渐变色带生成器 - 多色标等距渐变CSS

13
0
0
0
渐变类型
方向
自定义角度 90°
预设配色
色标列表 (3)
最多支持10个色标
CSS 代码
background: linear-gradient(90deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%);
提示：将此CSS代码复制到你的样式表中，或直接用作元素的 background 或 background-image 属性。
CSS渐变常见问题与知识点
什么是CSS渐变（Gradient）？有哪些类型？
CSS渐变是一种图像类型，由两种或多种颜色之间平滑过渡组成。它不是独立的CSS属性，而是用作 background-image 的值。主要类型包括：
● linear-gradient：线性渐变，沿直线方向过渡（最常用）
● radial-gradient：径向渐变，从中心点向外辐射过渡
● conic-gradient：锥形渐变，围绕中心点旋转过渡（CSS较新特性）
渐变可以包含多个色标（color stops），每个色标定义颜色和位置。
什么是色标（Color Stop）？如何计算等距分布？
色标是渐变中颜色变化的关键点，由颜色值和位置百分比组成。例如 #ff0000 25% 表示红色在渐变25%的位置。
等距分布指所有色标在0%-100%范围内均匀排列。计算公式：第i个色标（从0开始）的位置 = i × 100% ÷ (n-1)，其中n为色标总数。
例如4个色标：0%、33.3%、66.7%、100%。等距分布能产生节奏感强、视觉平衡的渐变效果。
linear-gradient的角度如何理解？
CSS中渐变角度遵循数学坐标系：
● 0deg = 从下到上（to top）
● 90deg = 从左到右（to right）
● 180deg = 从上到下（to bottom）
● 270deg = 从右到左（to left）
角度按顺时针方向增加。你也可以使用关键词如 to bottom right 表示对角线方向。本工具支持0-360度精确控制。
如何在实际项目中使用生成的渐变代码？
生成的CSS代码可直接用于任何支持 background-image 的元素：
● 背景：background: linear-gradient(...);
● 按钮：配合 border-radius 和 box-shadow 制作渐变按钮
● 文字：使用 background-clip: text 实现渐变文字
● 边框：结合 border-image 或伪元素实现渐变边框
渐变在不同浏览器中兼容性良好，现代浏览器均已支持。
径向渐变（radial-gradient）有什么特点？
径向渐变从中心向外扩散，支持以下参数：
● 形状：circle（圆形）或 ellipse（椭圆，默认）
● 位置：如 at center、at top left 等，定义渐变中心
● 大小：如 closest-side、farthest-corner 等
径向渐变适合制作光晕、聚光灯、水波纹等效果。色标的等距分布原则与线性渐变相同。
🔧 相关工具