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` 都有效,直接用在你现有的属性上即可。
- 会上传或记录什么内容吗?
- 不会。此页面与渐变工具完全在浏览器中运行,不会向任何地方发送数据。