#3b82f6
位置0 %
グラデーションジェネレーター
タイプ・角度・色をスライダーで調整。10種のプリセットからも選べます
#8b5cf6
位置100 %
プリセット
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);使い方
- カラーストップの色と位置スライダーを動かして、グラデーションの色を設定しよう
- 角度スライダー（または方向ボタン）でグラデーションの向きを変えよう
- 「📋 CSSをコピー」ボタンでコードをコピーして自分のスタイルシートに貼り付けよう！まずはプリセットから試してみるのもおすすめ
「角度を変えたいだけなのに全部書き直し」問題
linear-gradient(135deg, #667eea, #764ba2) — 角度を変えたい、色を1つ追加したい、中間地点を調整したい。
手書きだと数値を変えて保存→確認の繰り返し。色が3つ以上になると、どの位置にどの色があるか把握するのも大変。
このジェネレーターなら、カラーストップをドラッグで追加・移動できて、角度もスライダーで即変更。 プレビューを見ながら「この色の組み合わせだ！」と決めたらCSSをコピーするだけ。
Webサイトでグラデーションを使う場面
- ヒーローセクションの背景 — 単色だと地味だけど、2色のグラデーションにするだけで一気にプロっぽくなる。ポートフォリオのファーストビューに。
- ボタンのアクセントカラー — 単色ボタンより目を引く。CTAボタン（「申し込む」「送信」）に使うとクリック率が上がる。
- テキストにグラデーション —
background-clip: textと組み合わせれば、文字自体にグラデーションがかかる。見出しのデザインに。
グラデーションについてもっと学ぼう
よくある質問
- Q. linear-gradient と radial-gradient の使い分けは？
- linear は直線方向の変化（ヘッダー背景、ボタンなど）。radial は中心から広がる変化（スポットライト効果、丸いバッジなど）。
- Q. グラデーションの境界がギザギザに見える
- 色の変化が急すぎるとバンディング（縞模様）が見えることがある。中間色を追加するか、色の差を小さくすると滑らかになる。