免费在线CSS渐变生成器

这种 CSS 渐变 已成为装饰背景、按钮或卡片的最轻量、最灵活的方式。无需再从图像编辑器导出 PNG：浏览器会以矢量方式、用几十字节计算颜色之间的过渡。 CSS 渐变生成器 ，出自 Volade 在你于屏幕上创作的同时输出精确代码 — 角度、停靠点、原点位置。

linear-gradient：方向性渐变

该函数 linear-gradient() 接受一个角度，后跟颜色停靠点：linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)。角度 0deg 指向上方， 90deg 指向右侧， 180deg 指向下方。如果没有角度，浏览器默认从上到下。这是页眉、行动号召按钮和区块横幅中最常用的语法。

radial-gradient：光晕与椭圆

该函数 radial-gradient() 从一个点（默认为中心）出发，扩展成圆形或椭圆形。原点位置写作 at X% Y%：radial-gradient(circle at 50% 50%, …)。非常适合标题背后的光晕效果、聚焦中心的主视觉背景或合成的柔和阴影。工具提供 X 和 Y 两个滑块，可将原点精确到像素。

conic-gradient：绕点旋转

该函数 conic-gradient() 围绕一个点旋转，就像钟表指针。写法为 conic-gradient(from 90deg at 50% 50%, …)，可以创建圆环、圆形仪表、彩色边框或棱镜效果。每个停靠点占据一个角度扇区：排列多种颜色，就能不用一张图片画出 CSS 饼图。

颜色停靠点（color stops）

每个 停靠点 把颜色与百分比位置关联起来：#7a2fe2 0%, #a358ee 55%, #f3e8ff 100%。两种颜色使用相同位置会形成 清晰的过渡 （硬边）；距离较远的位置则产生渐进的淡出。两个以上的停靠点可以实现多色配色、色带或材质模拟（金属、珍珠母、北极光）。

叠加渐变并准备备用色

在简写属性中 background，顺序很重要：前景在前。在照片上加暗色遮罩的写法是 background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);。请始终准备一种 纯色 作为备用色（background-color），供非常旧的浏览器使用，或在图片加载期间显示。

性能最佳实践

CSS 渐变会在每次尺寸变化时重新计算：停靠点数量要适度（90% 的情况下 2 到 5 个就足够），并避免在移动端超大区域上叠加多层。优先选择 十六进制或 HSL 等稳定值，并在设计定稿后固定角度，以避免浏览器之间的细微差异。

符合 Volade 品牌的渐变

在延展出各种渐变之前，若要构建协调的配色方案，请结合使用 调色板生成器 与 颜色选择器 ：先确定你的品牌色调，然后作为停靠点粘贴到这里。结果可直接复制到你的 CSS、设计系统或主题中 — 电脑和手机皆可，无需注册，也不发送任何数据。