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

互动渐变探索器 - 抓取渐变色标移动

10
0
0
0
线性渐变 · 90°
0% 25% 50% 75% 100%
🖱 拖拽色标移动 · 点击轨道空白处添加色标 · 右键色标删除
background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
常见问题 & 知识点
什么是 CSS 渐变（Gradient）？
CSS 渐变是一种以平滑过渡的方式在两种或多种颜色之间进行混合的图像。渐变属于 CSS <image> 数据类型，通过 background-image 或 background 属性使用。它们由浏览器动态生成，不需要图片文件，因此具有极佳的性能和灵活性。CSS 支持三种渐变类型：线性渐变（linear-gradient）、径向渐变（radial-gradient）和锥形渐变（conic-gradient）。
线性渐变和径向渐变有什么区别？
线性渐变沿着一条直线方向进行颜色过渡，可以通过角度（如 90deg）或方向关键词（如 to right）来控制。径向渐变从一个中心点向外扩散进行颜色过渡，形成圆形或椭圆形的渐变效果。线性渐变适合背景、分割线、按钮等场景；径向渐变适合聚光灯效果、光晕、徽章等场景。两者都支持多个色标以实现复杂的渐变效果。
什么是色标（Color Stop）？
色标是渐变中定义颜色变化的关键点。每个色标包含一个颜色值和一个位置（百分比或长度）。浏览器会在相邻色标之间自动进行颜色插值，产生平滑的过渡效果。例如 #ff0000 0%, #0000ff 100% 表示从红色（0%位置）平滑过渡到蓝色（100%位置）。你可以添加多个色标来创建更丰富的渐变效果，如 #ff0000 0%, #ffff00 50%, #0000ff 100%。
CSS 渐变的角度如何理解？
在 CSS 线性渐变中，0deg 表示从下到上（bottom to top），90deg 表示从左到右（left to right），180deg 表示从上到下（top to bottom），270deg 表示从右到左。你也可以使用关键词：to right（等同于 90deg）、to bottom（等同于 180deg）、to top right（对角线方向）等，关键词对初学者更友好。
浏览器对 CSS 渐变的兼容性如何？
CSS 渐变在现代浏览器中得到了极佳的支持。线性渐变（linear-gradient）和径向渐变（radial-gradient）在所有主流浏览器中均可正常使用，包括 Chrome、Firefox、Safari、Edge 以及移动端浏览器。锥形渐变（conic-gradient）的支持也在 2020 年后全面普及。对于非常老旧的浏览器（如 IE9 及以下），可以使用降级方案：提供一个纯色背景作为 fallback，渐变在不支持时自动回退到该纯色。
使用 CSS 渐变是否影响页面性能？
CSS 渐变由浏览器的渲染引擎直接生成，性能非常优秀。与加载图片相比，渐变不需要额外的 HTTP 请求，不占用带宽，且可以无限缩放而不会失真。不过，在移动端低性能设备上，过于复杂的渐变（如大量色标 + 径向渐变 + 大尺寸元素）可能会轻微影响渲染性能。建议保持色标数量在 2-6 个之间以获得最佳体验。另外，使用 will-change 属性或对频繁变化的渐变使用 CSS 动画时需注意性能影响。
🔧 相关工具