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` の両方で有効です。すでに使っているプロパティにそのまま入れてください。
- アップロードや記録はされますか？
- いいえ。このページとグラデーション ツールはすべてブラウザ内で完結し、どこにも送信されません。
