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 渐变生成器完全免费。无需注册，无使用限制，所有生成的代码可在任何项目中使用，无需署名。
如何使用CSS 渐变生成器
用眼睛调配 CSS 渐变，即时复制可用于生产环境的代码。渲染在浏览器本地完成，不会上传任何数据。
- 在 Type 中选择渐变类型：linear-gradient 或 radial-gradient。
- 线性渐变设置 Angle 角度，径向渐变则选择 circle 或 ellipse 等 Shape 形状。
- 在 Color Stops 区域添加色标、修改颜色并拖动位置。
- 点击 Presets 中的任一预设色板，从现成配色开始调整。
- 复制生成的 CSS，粘贴到你的样式表中。
把两个不同颜色的色标放在同一位置可形成硬边——不用图片就能快速做出条纹背景。
相关工具
- CSS 阴影生成器 免费在线 CSS box-shadow 生成器。可视化创建精美阴影，可调整偏移、模糊、扩展、颜色和内阴影。实时预览，即时复制代码。
- CSS圆角生成器 可视化CSS圆角生成器，独立调整每个角的圆角半径，实时预览并即时复制生成的CSS代码。
- CSS Grid生成器 免费在线可视化CSS Grid生成器，实时预览。交互式创建响应式网格布局，一键导出生产级CSS代码。
- CSS Flexbox生成器 可视化CSS Flexbox生成器,实时预览。调整Flex属性,即时获取可用的CSS代码。
- 创意圆角生成器 免费在线创意圆角生成器。拖拽 8 个手柄或选择 blob 预设，快速创建有机 CSS 形状并复制 border-radius 代码。
- 颜色转换器 免费在线颜色转换器。即时转换 HEX、RGB、HSL、HSV 格式，带可视化拾色器。100% 隐私保护，浏览器本地运行。
- CSS 缓动函数生成器 免费在线 CSS 缓动生成器。在交互曲线上拖拽 cubic-bezier 控制点，内置 18 种预设，小球循环动画实时对比，一键复制 timing function。
- CSS 文字阴影生成器 免费在线 CSS text-shadow 生成器。多层阴影可调偏移、模糊、颜色与透明度，内置霓虹、3D、复古、光晕等预设，实时预览并一键复制代码。