CSSグラデーション生成ツール
Linear/Radial/Conicグラデーションをリアルタイムプレビューで生成。OKLCH色空間対応でくすみのない美しいグラデーションを作成できます。
°
カラーストップ
CSS
テキストグラデーション
Sample Text
プリセット
使い方
1
グラデーションタイプを選択
Linear（直線）、Radial（放射）、Conic（円錐）の中からグラデーションタイプを選びます。
2
色と角度を調整
カラーストップの色・位置を変更し、角度や色空間を調整してお好みのグラデーションを作成します。
3
CSSをコピーして使用
生成されたCSSコードをコピーボタンでクリップボードにコピーし、そのままCSSファイルに貼り付けて使用します。
CSSグラデーション生成とは
CSSのグラデーションプロパティを視覚的に生成するWebツールです。色の選択・角度の調整・プレビューをリアルタイムで行い、そのまま使えるCSSコードを出力します。すべての処理はブラウザ内で完結し、サーバーにデータを送信しません。
機能・特徴
- 3タイプ対応Linear（直線）、Radial（放射）、Conic（円錐）の3タイプに対応。Repeatingオプションも利用可能です。
- OKLCH色空間従来のRGBに加えOKLCH色空間に対応。中間色のくすみを防ぎ、美しいグラデーションを生成します。
- リアルタイムプレビュー色・角度・位置の変更が即座にプレビューに反映。テキストグラデーションも同時に確認できます。
- 30以上のプリセット暖色系・寒色系・パステル・ダーク・ネオンなど豊富なプリセットからワンクリックで選べます。
活用シーン
- Webサイトの背景デザイン
- ヒーローセクションのグラデーション
- ボタンやカードのホバーエフェクト
- 見出しやロゴのテキストグラデーション
- SNSバナーやサムネイルの背景
よくある質問
CSSグラデーション生成は無料ですか？
はい、完全無料でご利用いただけます。会員登録も不要で、ブラウザを開くだけですぐにお使いいただけます。
生成したCSSはそのままコピーして使えますか？
はい、コピーボタンでクリップボードにコピーし、そのままCSSファイルに貼り付けてご利用いただけます。
OKLCHとは何ですか？
人間の色知覚に基づいた色空間で、従来のRGBよりもグラデーションの中間色がくすみにくく、美しいグラデーションを生成できます。2026年現在、主要ブラウザで対応しています。
Conic Gradientに対応していないブラウザはありますか？
IE11は非対応ですが、2026年現在の主要ブラウザ（Chrome、Firefox、Safari、Edge）はすべて対応しています。
テキストグラデーションとは何ですか？
テキストの文字色にグラデーションを適用する技法です。background-clip: text を使用し、背景のグラデーションを文字の形で切り抜いて表示します。