Tailwind CSS 首頁
  1. 背景
  2. 漸層顏色停止

快速參考

類別
預覽 
from-inherit
from-current
from-transparent
from-black
from-white
from-slate-50
from-slate-100
from-slate-200
from-slate-300
from-slate-400
from-slate-500
from-slate-600
from-slate-700
from-slate-800
from-slate-900
來自-slate-950
來自-gray-50
來自-gray-100
來自-gray-200
來自-gray-300
來自-gray-400
來自-gray-500
來自-gray-600
來自-gray-700
from-gray-800
from-gray-900
from-gray-950
from-zinc-50
from-zinc-100
from-zinc-200
from-zinc-300
from-zinc-400
from-zinc-500
from-zinc-600
from-zinc-700
from-zinc-800
from-zinc-900
from-zinc-950
from-neutral-50
from-neutral-100
from-neutral-200
from-neutral-300
from-neutral-400
from-neutral-500
from-neutral-600
from-neutral-700
from-neutral-800
from-neutral-900
from-neutral-950
from-stone-50
from-stone-100
from-stone-200
from-stone-300
來自-石頭-400
來自-石頭-500
來自-石頭-600
來自-石頭-700
來自-石頭-800
來自-石頭-900
來自-石頭-950
來自-紅色-50
from-red-100
from-red-200
from-red-300
from-red-400
from-red-500
from-red-600
from-red-700
from-red-800
from-red-900
from-red-950
from-orange-50
from-orange-100
from-orange-200
from-orange-300
from-orange-400
from-orange-500
from-orange-600
from-orange-700
from-orange-800
from-orange-900
from-orange-950
from-amber-50
from-amber-100
from-amber-200
from-amber-300
from-amber-400
from-amber-500
from-amber-600
from-amber-700
來自琥珀色-800
來自琥珀色-900
來自琥珀色-950
來自黃色-50
來自黃色-100
來自黃色-200
來自黃色-300
from-yellow-400
from-yellow-500
from-yellow-600
from-yellow-700
from-yellow-800
from-yellow-900
from-yellow-950
from-lime-50
來自-萊姆-100
來自-萊姆-200
來自-萊姆-300
來自-萊姆-400
來自-萊姆-500
來自-萊姆-600
來自-萊姆-700
from-lime-800
from-lime-900
from-lime-950
from-green-50
from-green-100
from-green-200
from-green-300
from-green-400
from-green-500
from-green-600
from-green-700
from-green-800
from-green-900
from-green-950
from-emerald-50
from-emerald-100
from-emerald-200
from-emerald-300
from-emerald-400
from-emerald-500
from-emerald-600
from-emerald-700
from-emerald-800
from-emerald-900
from-emerald-950
from-teal-50
from-teal-100
from-teal-200
from-teal-300
來自青綠色-400
來自青綠色-500
來自青綠色-600
來自青綠色-700
來自青綠色-800
來自青綠色-900
來自青綠色-950
來自青色-50
來自青色-100
來自青色-200
來自青色-300
來自青色-400
來自青色-500
來自青色-600
來自-青色-700
來自-青色-800
來自-青色-900
來自-青色-950
來自-天空-50
來自-天空-100
來自-天空-200
from-sky-300
from-sky-400
from-sky-500
from-sky-600
from-sky-700
from-sky-800
from-sky-900
from-sky-950
來自藍色-50
來自藍色-100
來自藍色-200
來自藍色-300
來自藍色-400
來自藍色-500
from-blue-600
from-blue-700
from-blue-800
from-blue-900
from-blue-950
from-indigo-50
from-indigo-100
from-indigo-200
來自靛藍-300
來自靛藍-400
來自靛藍-500
來自靛藍-600
來自靛藍-700
來自靛藍-800
來自靛藍-900
來自靛藍-950
來自紫羅蘭-50
來自紫羅蘭-100
來自紫羅蘭-200
來自紫羅蘭-300
來自紫羅蘭-400
來自紫羅蘭-500
from-violet-600
from-violet-700
from-violet-800
from-violet-900
from-violet-950
from-purple-50
from-purple-100
來自紫色-200
來自紫色-300
來自紫色-400
來自紫色-500
來自紫色-600
來自紫色-700
來自紫色-800
來自紫色-900
來自紫色-950
來自洋紅色-50
來自洋紅色-100
來自洋紅色-200
來自洋紅色-300
來自-紫紅色-400
來自-紫紅色-500
來自-紫紅色-600
來自-紫紅色-700
來自-紫紅色-800
來自-紫紅色-900
來自-紫紅色-950
來自-粉紅色-50
來自粉紅色-100
來自粉紅色-200
來自粉紅色-300
來自粉紅色-400
來自粉紅色-500
來自粉紅色-600
from-pink-700
from-pink-800
from-pink-900
from-pink-950
from-rose-50
from-rose-100
from-rose-200
來自玫瑰-300
來自玫瑰-400
來自玫瑰-500
來自玫瑰-600
來自玫瑰-700
來自玫瑰-800
來自玫瑰-900
來自玫瑰-950
從 0%
從 5%
從 10%
從 15%
從 20%
從 25%
從 30%
從 35%
從 40%
從 45%
從 50%
從 55%
從 60%
從 65%
從 70%
從 75%
從 80%
從 85%
從 90%
從 95%
從 100%
via-inherit
via-current
via-transparent
via-black
via-white
via-slate-50
via-slate-100
via-slate-200
via-slate-300
via-slate-400
via-slate-500
via-slate-600
via-slate-700
via-slate-800
via-slate-900
via-slate-950
via-gray-50
via-gray-100
via-gray-200
via-gray-300
via-gray-400
via-gray-500
via-gray-600
via-gray-700
via-gray-800
via-gray-900
via-gray-950
via-zinc-50
via-zinc-100
via-zinc-200
via-zinc-300
via-zinc-400
via-zinc-500
via-zinc-600
via-zinc-700
via-zinc-800
via-zinc-900
via-zinc-950
via-neutral-50
via-neutral-100
via-neutral-200
via-neutral-300
via-neutral-400
via-neutral-500
via-neutral-600
via-neutral-700
via-neutral-800
via-neutral-900
via-neutral-950
via-stone-50
via-stone-100
via-stone-200
via-stone-300
via-stone-400
via-stone-500
via-stone-600
via-stone-700
via-stone-800
via-stone-900
via-stone-950
via-red-50
via-red-100
via-red-200
via-red-300
via-red-400
via-red-500
via-red-600
via-red-700
via-red-800
via-red-900
via-red-950
via-orange-50
via-orange-100
via-orange-200
via-orange-300
via-orange-400
via-orange-500
via-orange-600
via-orange-700
via-orange-800
via-orange-900
via-orange-950
via-amber-50
via-amber-100
via-amber-200
via-amber-300
via-amber-400
via-amber-500
via-amber-600
via-amber-700
via-amber-800
via-amber-900
via-amber-950
via-yellow-50
via-yellow-100
via-yellow-200
via-yellow-300
via-yellow-400
via-yellow-500
via-yellow-600
via-yellow-700
via-yellow-800
via-yellow-900
via-yellow-950
via-lime-50
via-lime-100
via-lime-200
via-lime-300
via-lime-400
via-lime-500
via-lime-600
via-lime-700
via-lime-800
via-lime-900
via-lime-950
via-green-50
via-green-100
via-green-200
via-green-300
via-green-400
via-green-500
via-green-600
via-green-700
via-green-800
via-green-900
via-green-950
via-emerald-50
via-emerald-100
via-emerald-200
via-emerald-300
via-emerald-400
via-emerald-500
via-emerald-600
via-emerald-700
via-emerald-800
via-emerald-900
via-emerald-950
via-teal-50
via-teal-100
via-teal-200
via-teal-300
via-teal-400
via-teal-500
via-teal-600
via-teal-700
via-teal-800
via-teal-900
via-teal-950
via-cyan-50
via-cyan-100
via-cyan-200
via-cyan-300
via-cyan-400
via-cyan-500
via-cyan-600
via-cyan-700
via-cyan-800
via-cyan-900
via-cyan-950
via-sky-50
via-sky-100
via-sky-200
via-sky-300
via-sky-400
via-sky-500
via-sky-600
via-sky-700
via-sky-800
via-sky-900
via-sky-950
via-blue-50
via-blue-100
via-blue-200
via-blue-300
via-blue-400
via-blue-500
via-blue-600
via-blue-700
via-blue-800
via-blue-900
via-blue-950
via-indigo-50
via-indigo-100
via-indigo-200
via-indigo-300
via-indigo-400
via-indigo-500
via-indigo-600
via-indigo-700
via-indigo-800
via-indigo-900
via-indigo-950
via-violet-50
via-violet-100
via-violet-200
via-violet-300
via-violet-400
via-violet-500
via-violet-600
via-violet-700
via-violet-800
via-violet-900
via-violet-950
via-purple-50
via-purple-100
via-purple-200
via-purple-300
via-purple-400
via-purple-500
via-purple-600
via-purple-700
via-purple-800
via-purple-900
via-purple-950
via-fuchsia-50
via-fuchsia-100
via-fuchsia-200
via-fuchsia-300
via-fuchsia-400
via-fuchsia-500
via-fuchsia-600
via-fuchsia-700
via-fuchsia-800
via-fuchsia-900
via-fuchsia-950
via-pink-50
via-pink-100
via-pink-200
via-pink-300
via-pink-400
via-pink-500
via-pink-600
via-pink-700
via-pink-800
via-pink-900
via-pink-950
via-rose-50
via-rose-100
via-rose-200
via-rose-300
via-rose-400
via-rose-500
via-rose-600
via-rose-700
via-rose-800
via-rose-900
via-rose-950
via-0%
via-5%
via-10%
via-15%
via-20%
via-25%
via-30%
via-35%
via-40%
via-45%
via-50%
via-55%
via-60%
via-65%
via-70%
via-75%
via-80%
via-85%
via-90%
via-95%
via-100%
to-inherit
to-current
to-transparent
to-black
to-white
to-slate-50
to-slate-100
to-slate-200
to-slate-300
to-slate-400
to-slate-500
to-slate-600
to-slate-700
to-slate-800
to-slate-900
to-slate-950
to-gray-50
to-gray-100
to-gray-200
to-gray-300
to-gray-400
to-gray-500
to-gray-600
to-gray-700
to-gray-800
to-gray-900
至灰階-950
至鋅色-50
至鋅色-100
至鋅色-200
至鋅色-300
至鋅色-400
至鋅色-500
至鋅色-600
至鋅色-700
至鋅色-800
至鋅色-900
至鋅色-950
至中性-50
至中性-100
至中性-200
至中性-300
至中性-400
至中性-500
至中性-600
to-neutral-700
to-neutral-800
to-neutral-900
to-neutral-950
to-stone-50
to-stone-100
to-stone-200
to-stone-300
to-stone-400
to-stone-500
to-stone-600
to-stone-700
to-stone-800
to-stone-900
to-stone-950
to-red-50
to-red-100
to-red-200
to-red-300
to-red-400
to-red-500
to-red-600
to-red-700
to-red-800
to-red-900
to-red-950
to-orange-50
to-orange-100
to-orange-200
to-orange-300
to-orange-400
to-orange-500
to-orange-600
to-orange-700
to-orange-800
to-orange-900
to-orange-950
to-amber-50
to-amber-100
to-amber-200
to-amber-300
to-amber-400
to-amber-500
to-amber-600
to-amber-700
to-amber-800
to-amber-900
to-amber-950
to-yellow-50
to-yellow-100
to-yellow-200
to-yellow-300
to-yellow-400
to-yellow-500
to-yellow-600
to-yellow-700
to-yellow-800
to-yellow-900
to-yellow-950
到萊姆綠-50
到萊姆綠-100
到萊姆綠-200
到萊姆綠-300
到萊姆綠-400
到萊姆綠-500
到萊姆綠-600
到萊姆綠-700
到萊姆綠-800
到萊姆綠-900
到萊姆綠-950
到綠色-50
到綠色-100
到綠色-200
到綠色-300
到綠色-400
到綠色-500
到綠色-600
to-green-700
to-green-800
to-green-900
to-green-950
to-emerald-50
to-emerald-100
to-emerald-200
to-emerald-300
to-emerald-400
to-emerald-500
to-emerald-600
to-emerald-700
to-emerald-800
to-emerald-900
to-emerald-950
to-teal-50
to-teal-100
to-teal-200
to-teal-300
to-teal-400
to-teal-500
to-teal-600
to-teal-700
to-teal-800
to-teal-900
to-teal-950
to-cyan-50
to-cyan-100
to-cyan-200
to-cyan-300
to-cyan-400
to-cyan-500
to-cyan-600
to-cyan-700
to-cyan-800
to-cyan-900
to-cyan-950
to-sky-50
to-sky-100
to-sky-200
to-sky-300
to-sky-400
to-sky-500
to-sky-600
to-sky-700
to-sky-800
to-sky-900
to-sky-950
to-blue-50
to-blue-100
to-blue-200
to-blue-300
to-blue-400
to-blue-500
to-blue-600
to-blue-700
to-blue-800
to-blue-900
to-blue-950
to-indigo-50
to-indigo-100
to-indigo-200
to-indigo-300
至靛藍色-400
至靛藍色-500
至靛藍色-600
至靛藍色-700
至靛藍色-800
至靛藍色-900
至靛藍色-950
至紫羅蘭色-50
至紫羅蘭色-100
至紫羅蘭色-200
至紫羅蘭色-300
至紫羅蘭色-400
至紫羅蘭色-500
至紫羅蘭色-600
至紫羅蘭色-700
至紫羅蘭色-800
至紫羅蘭色-900
至紫羅蘭色-950
至紫色-50
至紫色-100
至紫色-200
至紫色-300
至紫色-400
至紫色-500
至紫色-600
至紫色-700
至紫色-800
至紫色-900
至紫色-950
至洋紅色-50
至洋紅色-100
至洋紅色-200
至洋紅色-300
至洋紅色-400
至洋紅色-500
至洋紅色-600
至洋紅色-700
至洋紅色-800
至洋紅色-900
至洋紅色-950
至粉紅色-50
至粉紅色-100
至粉紅色-200
至粉紅色-300
至粉紅色-400
至粉紅色-500
至粉紅色-600
至粉紅色-700
至粉紅色-800
至粉紅色-900
至粉紅色-950
至玫瑰色-50
至玫瑰色-100
至玫瑰色-200
至玫瑰色-300
至玫瑰色-400
to-rose-500
to-rose-600
to-rose-700
to-rose-800
to-rose-900
to-rose-950
to-0%
to-5%
to-10%
to-15%
to-20%
to-25%
to-30%
to-35%
to-40%
to-45%
to-50%
to-55%
to-60%
to-65%
to-70%
to-75%
to-80%
to-85%
to-90%
to-95%
to-100%

基本用法

起始顏色

使用 from-{color} 工具設定漸層的起始顏色。

<div class="bg-gradient-to-r from-indigo-500 ..."></div>

結束顏色

使用 to-{color} 工具設定漸層的結束顏色。

<div class="bg-gradient-to-r from-cyan-500 to-blue-500 ..."></div>

預設情況下，漸層不會從透明淡入。若要從透明淡入，請反轉漸層方向並使用 from-{color} 工具。

中間顏色

使用 via-{color} 工具在漸層中加入中間顏色。

<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 ..."></div>

如果沒有 to-{color}，則具有 from-{color} 和 via-{color} 的漸層會預設淡出為透明。

指定停止位置

若要更精確控制漸層色彩的停止位置，請將 from-{position}、via-{position} 和 to-{position} 工具程式與漸層色彩工具程式結合使用。

10%
30%
90%
<div class="bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% ..."></div>

漸變為透明

漸層預設會漸變為透明，不需要您明確加入 to-transparent。Tailwind 會根據起始色彩，明智地計算出「透明」的正確值，以避免 Safari < 15.4 中的錯誤，該錯誤會導致漸變為 transparent 關鍵字時，會漸變為灰色，這看起來很糟糕。

不要明確加入 to-transparent

<div class="bg-gradient-to-r from-blue-500 to-transparent">
  <!-- ... -->
</div>

僅指定起始色彩，並自動漸變為透明

<div class="bg-gradient-to-r from-blue-500">
  <!-- ... -->
</div>

有條件地套用

懸停、焦點和其他狀態

Tailwind 讓你可以使用變體修飾符在不同的狀態中條件式套用實用程式類別。例如，使用 hover:from-pink-500 僅在懸停時套用 from-pink-500 實用程式。

<button type="button" class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 ...">
  Hover me
</button>

如需所有可用狀態修飾符的完整清單，請查看 懸停、焦點和其他狀態 文件。

中斷點和媒體查詢

你也可以使用變體修飾符來針對媒體查詢，例如回應式中斷點、深色模式、偏好減少動畫等。例如，使用 md:from-yellow-500 僅在中型螢幕大小及以上套用 from-yellow-500 實用程式。

<div class="bg-gradient-to-r from-purple-400 md:from-yellow-500">
  <!-- ... -->
</div>

如需了解更多資訊，請查看關於 回應式設計、 深色模式 和 其他媒體查詢修飾符 的文件。

使用自訂值

自訂您的主題

預設情況下，Tailwind 會將整個 預設調色盤 設定為漸層顏色。您可以透過編輯 theme.colors 或 theme.extend.colors 在您的 tailwind.config.js 檔案中 自訂您的調色盤。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

或者，您也可以透過編輯 theme.gradientColorStops 或 theme.extend.gradientColorStops 在您的 tailwind.config.js 檔案中，自訂您的漸層顏色。

除了顏色之外，您也可以透過編輯 theme.gradientColorStopPositions 或 theme.extend.gradientColorStopPositions，自訂漸層顏色的停止位置。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      gradientColorStopPositions: {
        33: '33%',
      }
    }
  }
}

在 主題自訂 文件中，深入了解如何自訂預設主題。

任意值

如果您需要使用一次性的 from|via|to-{color|position} 值，而這些值不適合包含在您的主題中，請使用方括號來使用任何任意值動態產生屬性。

<div class="from-[#243c5a]">
  <!-- ... -->
</div>

在 任意值 文件中了解有關任意值支援的更多資訊。