90°
グラデーションジェネレーター
色とオプションを設定して、ブラウザでCSSグラデーションをすぐに作成できます。
使い方
- 少なくとも2色を選択します。
- 線形または放射状を選びます。
- 線形の場合は角度を調整します。
- 生成されたCSSをコピーしてプロジェクトに貼り付けます。
ライブプレビュー
生成されたCSS
background: linear-gradient(90deg, #4f46e5, #06b6d4);
プリセット
意図を持ってグラデーションを使う
このツールでCSSグラデーションを素早く作成し、公開前に可読性を確認できます。
このツールを使う場面
- ヒーローやカード、CTA背景を短時間で決めたいとき。
- 線形と放射状を比較して選びたいとき。
- 実装にそのまま使えるCSSが必要なとき。
クイック手順
- まず2色を選びます。
- 線形/放射状を選択し、必要なら角度を調整します。
- 実際の文字可読性を意識してプレビューします。
- CSSをコピーして実レイアウトで確認します。
よくあるミス
- 彩度の高い色を多用しすぎる。
- ページのほぼ全セクションにグラデーションを使う。
- 背景全体で文字の見やすさを確認しない。