CSS Gradient（CSSグラデーション）とは
ブラウザだけでCSSのグラデーション背景を簡単に作成できる無料のオンラインツール。
線形 (linear)／放射状 (radial) のグラデーションを試したり、色の組み合わせを選んでコードをそのまま Webサイトに貼れる形で取得できるので初心者でも扱いやすいです。
さらに、色見本（swatches）やチュートリアル・参考記事などのリソースも豊富です。（英文なので翻訳機能推奨）
主な機能・特徴
| 線形グラデーション & 放射状グラデーション | 線形 (linear)／放射状 (radial) の両方が選べる |
| 角度・方向の調整 | 線形グラデーションであれば、どの方向に色が変わるか（上から下／斜め／左右など）を設定できる |
| リアルタイムプレビュー | 色を変えるたびに見た目がすぐ反映されるため出来上がりを確認しながら調整できる |
| プリセット / グラデーションギャラリー | 既存のきれいな色の組み合わせ（プリセット）や他の人が作ったグラデーションを見て選べるギャラリーがある |
| 学習リソース・記事 | グラデーションの作り方、方向／形／色の組み合わせ方などのガイド記事もあり、勉強にも使える |
使い方
インストール、ログイン不要で、すぐに、簡単に、直感的に使えます！
①色ストップ（Color Stops）を設定する
・各色が現れる位置（％など）を調整して色の変わり方をコントロールする
・最低２つの色を選ぶ（開始色と終了色）
・必要であれば間に色を追加して三色以上のグラデーションにする
②グラデーションタイプを選ぶ
線形 (linear)／放射状 (radial)を選択。これで背景が直線的か円形かが決まります。
線形の場合、グラデーションがどの方向へ伸びるか角度を設定。これはスライダーや数値入力で変えられます
③CSSコードをコピーする
デザインが決まったら、「Copy to clipboard」でコードを取得。
自分のスタイルシート（CSSファイル）や、HTMLに貼り付けます。
活用例
- Webサイトのヘッダー背景をおしゃれなグラデーションにして印象をよくしたいとき
- ボタンやカードの背景にグラデーションを使って視覚的アクセントをつけるとき
- テキストや見出し（見せたい文字）にグラデーションをかけて目立たせたいとき。記事タイトルなどで使うと効果的！
- InstagramやSNS用の背景画像を作る前に、CSS グラデーションでイメージを作ってから画像化するなどの下準備
- Webデザインの学習として、色ストップや方向を変えて「どんな見え方になるか」を試す教材として
注意点
※ほとんどのモダンブラウザでは問題ありませんが、古いブラウザや特殊な環境ではグラデーションの書き方の一部（角度や radial の形など）がサポートされていなかったり、見た目が違うことがあるため注意
related site
