CSS 梯度发生器:线性、径向、圆锥形(以及角度陷阱)

1次我因为渐变失去了一个下午的大部分时间, 不是一个复杂的-WP Adminify营销页面上的英雄背景, 品牌蓝色淡化成品牌橙色, 对角线我写 linear-gradient(45deg, #4466EE, #E99537) 而且走错了路。所以我尝试过 -45deg.也错.则 135deg的,这是正确的,我继续前进,但不理解为什么,这是最糟糕的结果,因为它保证了你'会再次弄错。

CSS梯度角,原因不是数学课上学的角度。 0deg 积分 起来的, 且角度增大 顺时针.在三角学中- 和在SVG中,在画布中- 0点直角和角度逆时针方向增加两种不同的约定,一种外观相同 deg unit,而且挑错了也没错讯息,it's 写得很明白 CSS 图像模块第 3 级的,而我根本就没有读过它。

That's 一个轶事中视觉生成器的案例。 梯度发生器 在 toolz。dev 上,您可以实时预览、可拖动颜色停止以及线性、径向和圆锥梯度的可复制 CSS - 因此角度问题可以自行回答,而不是花费您一个下午的时间。

TL;博士: 在CSS中, 0deg 指向 顶 和角度运行 顺时针如此 to right 等于 90deg 左上→右下对角线是 135deg不是 45deg.使用 梯度发生器 看到它而不是猜测它,并且 颜色选择器 要选择那些不't中间弄得泥泞的站点。梯度是 <image> 值 - 您可以使用的任何地方 url(),可以使用渐变。所有客户端,无注册。

从技术上讲,什么是 CSS 梯度?

渐变不是一种颜色。它's an 图像.那个单一的事实解释了大部分语法。

佩尔 CSS 图像级别 3、 linear-gradient()、 radial-gradient()并且它们的重复变体产生类型值 <image>.这意味着在任何地方,规范接受 url('photo.jpg'),它也接受一个梯度: background-image、 border-image、 list-style-image、 mask-image、 content.也表示梯度有 没有内在维度- 他们伸展身体来填充你放入它们的盒子,这就是为什么相同的梯度在 200px 按钮和 1400px 英雄上看起来不同。

conic-gradient() 后来来了,住进了 CSS 图像级别 4旁边是插值-颜色-空间语法 I'将到达下面。

What's 线性、径向、圆锥的区别?

线性梯度 - 和角度约定

/* Default: top to bottom. No angle needed. */
background: linear-gradient(#4466EE, #E99537);

/* Keywords are the safe way to say it */
background: linear-gradient(to right, #4466EE, #E99537);
background: linear-gradient(to bottom right, #4466EE, #E99537);

/* Angles: 0deg = up, clockwise from there */
background: linear-gradient(90deg, #4466EE, #E99537);   /* same as `to right` */
background: linear-gradient(180deg, #4466EE, #E99537);  /* same as `to bottom` */
background: linear-gradient(135deg, #4466EE, #E99537);  /* top-left → bottom-right */

把这件事交给记忆和你'll永远不要重复我的下午:

There's 角落关键词又多了一个微妙之处。 to bottom right 确实如此 不是 简单来说就是 135deg.spec 将其定义为所选择的角度,使梯度线垂直于 其他 对角线 - 这意味着在一个非方形盒子上, to bottom right 並 135deg 产生明显不同的结果。在正方形上,它们'是相同的。那'是您在晚上 11 点注意到的那种东西,当一张卡片在设计中看起来正确而在狭窄的列中看起来错误时。

径向梯度 - 大小关键字所在的位置

/* Simple */
background: radial-gradient(circle, #4466EE, #0F172A);

/* Positioned spotlight */
background: radial-gradient(circle at 30% 20%, #4466EE, transparent 60%);

/* Explicit size */
background: radial-gradient(circle closest-side at 60% 40%, #E99537, transparent);

四个大小的关键字决定在哪里 最终 颜色停止着陆,从中心测量:

• closest-side- 盒子最近的边缘
• farthest-side- 最远的边缘
• closest-corner- 最近的角落
• farthest-corner- 最远的角落 (这是默认值)

更改关键字,渐变看起来像不同的渐变 这是径向渐变最常见的原因"won't做我想做的事",点击中的四个选项要快得多 梯度发生器 比推理一下。

圆锥形梯度 - 馅饼、轮子和环

圆锥形扫色 左右 中心,从 12 o'时钟开始,顺时针方向(与线性相同的约定 - 至少它'一致)。

/* Colour wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart with hard stops — 40% / 35% / 25% */
background: conic-gradient(
  #4466EE 0deg 144deg,
  #E99537 144deg 270deg,
  #34D399 270deg 360deg
);

/* Progress ring: conic + a mask */
.ring {
  background: conic-gradient(#4466EE 0turn 0.63turn, #E5E7EB 0.63turn 1turn);
  mask: radial-gradient(circle, transparent 60%, #000 61%);
  border-radius: 50%;
}

那个 mask line是你'见过的每一个甜甜圈进度指标背后的全部技巧,而且它's大约六行css而不是svg库。

我如何控制色彩落地?

颜色停止

停止一个位置,你就控制了过渡。停止 两 位置和你都有一个硬边--根本没有插值。

/* Even (default) */
background: linear-gradient(to right, #4466EE, #E99537);

/* Explicit positions: solid blue to 30%, then blend */
background: linear-gradient(to right, #4466EE 30%, #E99537 70%);

/* Hard stops = stripes. The double-position syntax is Images 4. */
background: linear-gradient(
  to right,
  #4466EE 0 25%,
  #E99537 25% 50%,
  #34D399 50% 75%,
  #0F172A 75% 100%
);

插值提示(您没有的中点'不知道您可以移动)

赤裸裸的百分比 之间 2种颜色移动50/50的中点, 这是我所知道的梯度语法中最未被充分利用的一段:

/* Default: the halfway colour sits at 50% */
background: linear-gradient(to right, #4466EE, #E99537);

/* Halfway colour now sits at 25% — blue gives way early */
background: linear-gradient(to right, #4466EE, 25%, #E99537);

用于图像稀松布。 A to top, rgba(0,0,0,.8), transparent overlay通常会吃掉照片太多;掉落一个 35% 暗示,黑暗向标题所在的底部塌陷。

重复模式梯度

.hatched {
  background: repeating-linear-gradient(
    45deg,
    #0F172A 0 10px,
    #1E293B 10px 20px
  );
}

1行,无图像文件,可无限扩展。只需don't将其应用到整页元素上,然后想知道为什么在中端Android上滚动卡顿 - 在滚动过程中重新绘制一个大的重复梯度对于合成器来说是真实的工作。

为什么我的渐变在中间看起来很泥泞?

两个不同的原因,人们不断地将它们混为一谈。

原因 1:sRGB 插值

默认情况下,浏览器在 sRGB 中混合梯度停止,逐个通道。对于轮子上彼此靠近的两种颜色 - 蓝色到紫色,橙色到红色 - that's 精细。对于互补颜色,它在中间产生一条死灰色带,因为两种相对的 sRGB 颜色的数学中点 於 大致是灰色的。蓝色到黄色是典型的罪犯。

CSS 图像第 4 级通过让您命名插值空间来修复此问题:

/* Grey sludge in the middle */
background: linear-gradient(to right, blue, yellow);

/* Vivid all the way through */
background: linear-gradient(in oklch, to right, blue, yellow);

oklch 在混合中保持感知到的亮度和色度稳定。浏览器支持 in <colorspace> 当前的 Chrome、Safari 和 Firefox 中的语法很好,但如果您需要支持旧的浏览器,则后备是旧的手动修复:添加中间停止并自行引导混合。

原因2:褪色至 transparent- 还有我的第二个错误

transparent 定义为 rgba(0, 0, 0, 0).透明的 黑.如果浏览器天真地插值, linear-gradient(#E99537, transparent) 在走向虚无的过程中会逐渐穿过更深、更灰的橙色。

现代浏览器不't 这样做 - 规范需要插值 预乘 alpha空间,这完全回避了这个问题。但是较旧的webkit没有,而且我在一个客户端网站上发了一位英雄,在我的机器上看起来很干净,在他们两年的ipad上看起来像一个肮脏的污迹。防弹版本,它不需要花任何钱,而且仍然在任何地方工作:

/* Explicit: same colour, zero alpha */
background: linear-gradient(#E99537, rgba(233, 149, 55, 0));

我仍然用疤痕组织写它。

我应该注意哪些无障碍设施?

对比度必须在整个梯度上保持

WCAG 2.1 SC 1.4。3 普通文本需要 4.5:1,大文本需要 3:1(18pt 或 14pt 粗体)。渐变意味着您的背景颜色在每个像素处都不同,因此必须满足该要求 最坏的情况 点 - 最轻的补丁,如果你的文本是白色的,最暗的,如果它's黑色。

可靠的模式是停止尝试使梯度本身可读,并在顶部分层稀松布:

.hero {
  background:
    linear-gradient(to bottom, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.8)),
    linear-gradient(135deg, #4466EE, #E99537);
  color: #fff;
}

现在,无论下面的梯度如何,文本都位于已知的暗范围内。检查末尾 颜色选择器 发货前 - 完整的对比度演练,包括我以 2.38:1 发货的品牌颜色,均在其中 颜色选择器指南。

渐变文本是一个活板门

这是在制作登陆页面上真正烧毁我的那个:

.gradient-heading {
  background: linear-gradient(135deg, #4466EE, #E99537);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

如果 background-clip: text don't申请任何理由 - 一个旧浏览器,一个扩展屏蔽背景图片,一个打印样式表 - you're左边 color: transparent 和一个 隐形航向。文字还在DOM中,所以屏幕阅读器读起来很开心,你不知道有什么不对劲。用 @supports 阻止它:

.gradient-heading { color: #0F172A; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-heading {
    background: linear-gradient(135deg, #4466EE, #E99537);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

默认情况下为纯色,渐变作为增强。那's第一次应该如何写。

动画梯度需要运动逃生舱口

你可以't过渡梯度 颜色-浏览器赢了't插值在两个之间 <image> 价值观。人们所热衷的却是 background-position 跨越超大梯度:

.animated {
  background: linear-gradient(270deg, #4466EE, #E99537, #34D399);
  background-size: 600% 600%;
  animation: shift 12s ease infinite;
}

@keyframes shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; }
}

最后一个阻滞不是可选的。连续背景运动是有记录的前庭疾病和荣誉的触发因素 prefers-reduced-motion 是三行。

(现代替代方案是注册自定义财产) @property 所以它的类型是已知的 因此 animatable,然后在渐变内部使用。it's clean,它's在当前浏览器中支持,它's仍然值得拥有减小的运动防护。)

如何使用该工具构建一个?

1. 打开 梯度发生器。
2. 选择一种类型 - 线性、径向或圆锥形。
3. 单击停止以更改其颜色;拖动它以移动其位置。单击条添加停止;拖下它以将其移除。
4. 为线性,拖动角度,看数字:这是哪里 0deg-IS-UP 惯例不再是抽象的。
5. Radial,循环四个大小的关键字,看看有什么变化,它's为他们建立直觉的最快方法。
6. 复制 CSS。

2种颜色通常都是正确的答案, 每一个渐变I'后悔过有五站。

值得偷窃的梯度

/* Toolz brand diagonal */
background: linear-gradient(135deg, #4466EE, #E99537);

/* Deep UI surface — subtle enough that nobody calls it a gradient */
background: linear-gradient(to bottom, #1E293B, #0F172A);

/* Card lift: 4% of tonal difference, and it reads as depth */
background: linear-gradient(to bottom, #FFFFFF, #F8FAFC);

/* Mesh — four positioned radials over a base colour */
background-color: #4466EE;
background-image:
  radial-gradient(at 18% 24%, #E99537 0px, transparent 52%),
  radial-gradient(at 79% 17%, #34D399 0px, transparent 48%),
  radial-gradient(at 41% 83%, #8B5CF6 0px, transparent 55%);

/* Frosted glass */
background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);

将您自己的品牌颜色融入其中 颜色选择器 首先,取 HSL 值,然后改变轻度而不是色调 - that's 如何获得干净地混合而不是战斗的停止。

常见问题

为什么我的 CSS 梯度走错了方向?

因为CSS梯度角从 顶 和增加 顺时针的,不像三角学、SVG或画布,它们从右边开始,逆时针方向前进。 to right 於 90deg、 to bottom 於 180deg且左上至右下对角线为 135deg不是 45deg。

我还需要吗 -webkit- CSS梯度的前缀?

不为 linear-gradient()、 radial-gradient()、或者 conic-gradient()- 所有三个工作在当前每个浏览器中都未加前缀。前缀仍然赢得保留的一位是 -webkit-background-clip: text 对于渐变文本,较旧的 Safari 需要它。将两个声明都运送到那里。

我可以为 CSS 梯度制作动画吗?

不是梯度值本身 - 梯度是一个 <image>者, 而浏览器赢了't在两个图像之间插值,标准解决方法是让梯度比它的框大很多(background-size: 600% 600%)和动画 background-position。 现代方法将自定义属性注册为 @property 所以它有一个已知的类型,并且在梯度内部变得可动画化。无论哪种方式,都用它来保护它 prefers-reduced-motion。

为什么我的梯度中间看起来是灰色或泥泞的?

SRGB插值几乎总是在车轮上相对坐着的颜色之间- 蓝色到黄色是经典,他们的sRGB中点真的是接近灰色的,通过命名更好的插值空间来修复它, linear-gradient(in oklch, to right, blue, yellow)或者添加中间止动件来自行引导混合物。

为什么会褪色 transparent 看起来很脏?

transparent 定义为 rgba(0, 0, 0, 0)- 透明的 黑。当前浏览器插值在预乘的alpha空间中, 所以这不再是一个问题, 但较旧的WebKit在它的出路中拖动了通过灰色的梯度, 如果你支持旧设备, 写自己的颜色的零alpha版本显式: rgba(233, 149, 55, 0) 代替 transparent。

如何制作梯度边框?

两个选项。 border-image: linear-gradient(135deg, #4466EE, #E99537) 1; 是一行但默默杀戮 border-radius.如果需要圆角,则将两层背景分层不同 background-clip 並 background-origin values,或者把梯度放在盒子后面的伪元素上。

CSS梯度对性能不利吗?

静态梯度很便宜 - 比下载等效图像便宜,并且可以免费扩展到任何大小。当必须有大梯度时,成本就会显现出来 重新喷漆 重复:滚动期间的整页重复梯度,或 a 下的几个分层梯度 backdrop-filter。如果一个页面在移动设备上感觉粘稠,那么's第一件事I'd检查DevTools'油漆轮廓仪。

梯度应该有多少个颜色停止?

Two,大部分时间。two当你想通过特定的色调引导混合时。beyond that you're通常达到某种网格梯度(几个定位的径向)做得更好,并且每个额外的停止是另一个可能在别人身上看起来错误的东西's显示。

CSS中如何做一个梯度背景?

设置 background (或x),在2019年1月17日,在2019年1月1日,在2019年1月1日,在2019年1月1日,在2019年1月1日,在2019年1月1日,在2019年1月1日,在2019年1月1日 background-image的)性质到一个梯度函数。 background: linear-gradient(to right, #4466EE, #E99537); 绘制从左到右的混合图,根本没有图像文件。 radial-gradient() 並 conic-gradient() 循圆形和扫掠混合的相同模式,因为结果是生成的而不是下载的,所以它在任何尺寸下都保持锋利。

CSS 中如何创建渐变文本?

打开梯度 background,然后设置 background-clip: text (与x)一起,在2019年1月1日开始,在2019年1月1日开始,在2019年1月1日开始,在2019年1月1日开始,在2019年1月1日开始,在2019年1月1日开始,在2019年1月1日开始 -webkit- safari 的前缀)和 color: transparent(markup)中,所以字母由渐变填充,而不是纯色,将真实文本保留在标记中,而不是烘烤成图像,因此它保持可选性,屏幕阅读器可读。

包裹起来

梯度是少数几个为零网络成本而赋予您真正视觉丰富性的 CSS 功能之一 - 无图像请求,无宽高比问题,通过构造独立于分辨率。语法很小。陷阱是具体且可知的:角度约定、径向大小关键字、sRGB 泥泞以及梯度文本中的隐形标题陷阱门。

在你可以看到的地方建造它们。 梯度发生器 是免费的,完全在浏览器中运行,并复制干净的 CSS。将其与 颜色选择器 对于保持对比度的停止,以及 CSS 迷你器 当你'准备好内联它时。前端架子的其余部分在 开发人员生产力工具指南。