CSS 梯度產生器:線性、徑向、圓錐形(和角度陷阱)

我曾經因為梯度而損失了一個下午的大部分時間。這並不複雜--WP Adminify 行銷頁面上的英雄背景,品牌藍色逐漸變成品牌橙色,對角線。我寫了 linear-gradient(45deg, #4466EE, #E99537) 但事情卻走錯路了。所以我嘗試了 -45deg.也錯了。然後 135deg,這是正確的,我繼續前行,但不明白為什麼,這是最糟糕的結果,因為它保證你'會再犯錯的。

原因是CSS梯度角不是你在數學課上學到的角度。 0deg 積分 向上,並且角度增加 順時針方向. 在三角學中 - 在 SVG 中,在畫布中 - 0 點直角和角度逆時針增加。兩種不同的約定,一種看起來相同 deg 單位,當您選擇錯誤時,不會出現錯誤訊息。它'寫得很清楚 CSS 影像模組等級 3,我根本沒讀過它。

That'這是一個軼事中視覺生成器的情況。這 梯度產生器 在 toolz。dev 上,您可以即時預覽、可拖曳的色彩停止以及線性、徑向和圓錐形梯度的可複製 CSS - 因此角度問題可以自行回答,而不是花費您一個下午的時間。

TL;DR: 在css中, 0deg 指向 頂 和角度運行 順時針方向,所以 to right 等於 90deg 左上角 → 右下角對角線是 135deg,不 45deg. 使用 梯度產生器 看到它而不是猜測它,並且 選色器 選擇中間泥濘的車站 '梯度是 <image> 值 - 您可以使用的任何地方 url(),你可以使用梯度。所有客戶端,無註冊。

從技術上講,什麼是 CSS 梯度?

漸層不是顏色。它'是 圖像. 這個事實解釋了大部分語法。

每 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'將到達下面。

什麼'是線性、徑向和圓錐曲線之間的差異?

線性梯度 - 和角度約定

/* 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 */

記住這一點,你'永遠不會重複我的下午:

There'角關鍵字還有一個微妙之處。 to bottom right 確實如此 不是 簡直就是意思 135deg. 規範將其定義為選擇的角度,以便梯度線垂直於 其他 對角線 - 意思是非方框上, 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 和#39 開始;時鐘並順時針移動(與線性相同 - 至少它'一致)。

/* 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 是每個甜甜圈進度指示器背後的全部技巧,你'曾經見過,它'大約有六行 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%
);

插值提示(你沒有的中點'不知道你可以移動)

裸百分比 之間 兩種顏色移動 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 疊加通常會消耗太多照片;掉落一個 35% 暗示進來,黑暗向標題所在的底部崩潰。

重複圖案的梯度

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

一行,無圖像文件,無限可擴展。只需 don't 將其套用到整頁元素,然後想知道為什麼在中檔 Android 上滾動結巴 - 在滾動過程中重新繪製大的重複梯度對於合成器來說是真正的工作。

為什麼我的梯度中間看起來很泥濘?

兩個不同的原因,人們不斷地將它們混為一談。

原因 1:sRGB 插值

預設情況下,瀏覽器會逐通道混合 sRGB 中的漸變停止。對於輪子上彼此靠近的兩種顏色 - 藍色到紫色,橙色到紅色 - that'很好。對於互補色,它會在中間產生一條死灰色帶,因為兩個相反的 sRGB 顏色的數學中點 是 大致是灰色的。藍色到黃色是典型的罪犯。

CSS Images Level 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) 在走向虛無的過程中,它會滑過逐漸變暗、變灰的橙色。

現代瀏覽器 don't do that - 規範需要插值 預乘 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 不't 以任何理由申請 - 舊瀏覽器、阻止背景圖像的擴充功能、列印樣式表 - you'留下 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;
  }
}

預設為純色,漸層作為增強。那'這是第一次應該如何寫的。

動畫漸層需要運動逃生艙口

您可以'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 所以它的類型是已知的 因此 可動畫化,然後在漸層內使用它。它's 乾淨,它's 在當前瀏覽器中支持,並且它's 仍然值得擁有減速護罩。)

如何使用工具建立一個?

1. 打開 梯度產生器.
2. 選擇一種類型 - 線性、徑向或圓錐形。
3. 點擊停止以更改其顏色;拖曳它以移動其位置。點擊欄新增停止;將其拖走以將其刪除。
4. 對於線性,拖曳角度。看數字:這就是位置 0deg-is-up 約定不再抽象。
5. 對於徑向,循環四個大小的關鍵字並觀察什麼變化。 It'是為他們建立直覺的最快方法。
6. 複製 CSS。

兩種顏色通常是正確的答案。每個梯度 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'以及如何乾淨地混合而不是戰鬥。

常見問題

為什麼我的 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 值,或將梯度放在框後面的偽元素上。

CSS 梯度對效能不利嗎?

靜態梯度很便宜--比下載等效圖像便宜,而且它可以免費擴展到任何尺寸。當必須有大梯度時,成本就會出現 重新粉刷 重複:整頁在滾動過程中重複梯度,或在 a 下重複幾個分層梯度 backdrop-filter. 如果頁面在行動裝置上感覺很黏,則 's 第一件事 I'd 檢視 DevTools'油漆剖面圖。

漸層應該有多少個顏色停頓?

二、大多數時候。當你想引導混合物穿過特定色調時,三個。除此之外,你'通常會達到網格梯度(幾個定位的徑向)效果更好的東西,並且每個額外的停止都是另一個可能在其他人身上看起來不對勁的東西'顯示。

如何在 CSS 中建立梯度背景?

設定 background (或者 background-image) 梯度函數的屬性。 background: linear-gradient(to right, #4466EE, #E99537); 從左到右混合繪製,完全沒有影像檔案。 radial-gradient() 和 conic-gradient() 圓形和掃掠混合遵循相同的模式。因為結果是生成的而不是下載的,所以它在任何尺寸下都保持鋒利。

如何在 CSS 中建立梯度文字?

打開梯度 background,然後設定 background-clip: text (與 -webkit- safari 的前綴)和 color: transparent,所以字母是用漸變而不是純色填充的。將真實文字保留在標記中,而不是將其烘烤成圖像,這樣螢幕閱讀器就可以選擇和閱讀它。

包裹起來

漸層是為數不多的 CSS 功能之一,它可以為您提供真正的視覺豐富性,而網路成本為零 - 沒有影像請求,沒有縱橫比問題,與結構無關的解析度。語法很小。陷阱是特定的且可知的:角度約定、徑向大小關鍵字、sRGB 混亂以及漸層文字中的不可見標題活板門。

在你可以看到的地方建造它們。這 梯度產生器 是免費的,完全在瀏覽器中運行,並複製乾淨的 CSS。將其與配對 選色器 對於保持對比的停止,以及 CSS 縮小器 當你'準備好將其內聯。前端架子的其餘部分位於 開發人員生產力工具指南.