CSS 渐变生成器
可视化创建精美 CSS 渐变。生成支持多色标、自定义角度和位置的线性、径向和锥形渐变。即时复制可投入生产的 CSS 代码。
什么是 CSS 渐变？
CSS 渐变是一种 CSS 图像值，可以在不使用图像文件的情况下显示两种或多种颜色之间的平滑过渡。渐变由浏览器渲染，与分辨率无关且性能极高。
支持哪些类型的 CSS 渐变？
本生成器支持三种类型：linear-gradient（颜色沿直线过渡）、radial-gradient（颜色从中心向外辐射）和 conic-gradient（颜色围绕中心点旋转，类似钟表盘面）。
线性渐变和径向渐变有什么区别？
线性渐变沿由角度或方向关键字定义的直线过渡颜色。径向渐变从中心点向外以圆形或椭圆形过渡颜色。
可以使用多少个色标？
可以使用任意数量的色标。每个色标定义一个颜色，可选地指定沿渐变线的位置（0% 到 100%）。多个色标创建复杂的多色过渡。
如何使用生成的 CSS 代码？
复制生成的 CSS 代码，粘贴到 CSS 样式表中 background 或 background-image 属性的值即可。代码在所有现代浏览器中均可正常工作。
什么是渐变中的色标？
色标在渐变线上的特定位置定义特定颜色。例如 "red 0%, blue 50%, green 100%" 创建一个从红色开始、中点过渡到蓝色、以绿色结束的渐变。
可以创建带角度的渐变吗？
可以，线性渐变支持 0deg 到 360deg 的角度值。也可以使用 "to right"、"to bottom"、"to top left" 等方向关键字表示常见角度。
CSS 渐变是响应式的吗？
是的，CSS 渐变本质上是响应式的，因为它们是矢量的并由浏览器渲染。它们可以完美缩放到任何容器大小，不会丢失质量或增加文件大小。
CSS 渐变会影响页面性能吗？
CSS 渐变通常性能很好。它们消除了图像文件的 HTTP 请求，并支持硬件加速。但具有许多色标的极复杂渐变可能影响低端设备的渲染性能。
可以在背景和边框中使用渐变吗？
可以，渐变可用于 background-image、border-image、mask-image 以及任何接受 CSS 图像值的属性。在需要图像值的地方都可以使用。
哪些浏览器支持 CSS 渐变？
所有现代浏览器都支持 CSS 渐变，包括 Chrome、Firefox、Safari、Edge 和 Opera。自 IE10 以来支持一直很好，当前浏览器不再需要供应商前缀。
如何创建重复渐变？
使用 repeating-linear-gradient 或 repeating-radial-gradient 代替标准版本。它们重复渐变模式填充整个元素，创建条纹或图案效果。
可以动画化 CSS 渐变吗？
CSS 渐变不能直接用 CSS 过渡动画化。但可以动画化 background-position、background-size，或使用 @property 的 CSS 自定义属性创建渐变动画效果。
这个渐变生成器是免费的吗？
是的，这个 CSS 渐变生成器完全免费。无需注册，无使用限制，所有生成的代码可在任何项目中使用，无需署名。