首頁 資源庫 CSS 漸層預設

CSS 漸層預設

一組即拿即用的 CSS 漸層。點擊色塊即可複製 `background` 值,也能打開漸層工具自行調整角度與顏色。

打開工具 →
Sunset
linear-gradient(135deg, #ff512f 0%, #f09819 100%)
Ocean
linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%)
Purple Haze
linear-gradient(135deg, #667eea 0%, #764ba2 100%)
Mint
linear-gradient(135deg, #00b09b 0%, #96c93d 100%)
Cherry
linear-gradient(135deg, #eb3349 0%, #f45c43 100%)
Midnight
linear-gradient(135deg, #232526 0%, #414345 100%)
Peach
linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)
Sky
linear-gradient(135deg, #00c6ff 0%, #0072ff 100%)
Forest
linear-gradient(135deg, #134e5e 0%, #71b280 100%)
Berry
linear-gradient(135deg, #c31432 0%, #240b36 100%)
Gold
linear-gradient(135deg, #f7971e 0%, #ffd200 100%)
Lavender
linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)
Steel
linear-gradient(135deg, #4b6cb7 0%, #182848 100%)
Rose
linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)
Emerald
linear-gradient(135deg, #11998e 0%, #38ef7d 100%)
Flamingo
linear-gradient(135deg, #f857a6 0%, #ff5858 100%)
Cobalt
linear-gradient(135deg, #0f2027 0%, #2c5364 100%)
Citrus
linear-gradient(135deg, #f2994a 0%, #f2c94c 100%)
Grape
linear-gradient(135deg, #41295a 0%, #2f0743 100%)
Aurora
linear-gradient(135deg, #43cea2 0%, #185a9d 100%)
Dusk
linear-gradient(135deg, #536976 0%, #292e49 100%)
Coral
linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%)
Radial Glow
radial-gradient(circle, #ff9966 0%, #ff5e62 100%)
Radial Ice
radial-gradient(circle, #e0eafc 0%, #cfdef3 100%)

常見問題

這些漸層要怎麼用?
點擊色塊(或旁邊的複製按鈕)即可複製 CSS 值,接著貼到任意元素的 `background` 屬性即可。目前所有主流瀏覽器都不需要加前綴。
可以調整角度或顏色嗎?
可以。打開漸層工具即可直接使用預設,或自行搭配角度與色標,即時預覽並一鍵複製最終的 `background` 值。
可以當作 `background-image` 使用嗎?
可以。`linear-gradient()`、`radial-gradient()` 的值對 `background` 與 `background-image` 皆有效,直接用在你現有的屬性上即可。
會上傳或記錄什麼內容嗎?
不會。此頁面與漸層工具完全在瀏覽器中執行,不會傳送到任何地方。
Family Site