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` 皆有效,直接用在你現有的屬性上即可。
- 會上傳或記錄什麼內容嗎?
- 不會。此頁面與漸層工具完全在瀏覽器中執行,不會傳送到任何地方。