CSS グラデーション生成
カラーストップと角度を画面上で調整し、線形・放射状グラデーションを作ります。プレビューが整ったら CSS をコピーできます。
バーをクリックでストップを追加、ハンドルをドラッグで移動、ハンドルをクリックで削除します。
background: linear-gradient(90deg, #0066cc 0%, #2997ff 100%);CSS グラデーション生成の使い方
グラデーションを作って CSS コードを手に入れるまでの流れを、ステップごとにまとめました。
種類と方向を選ぶ
まず線形（linear）と放射状（radial）から種類を選びます。線形は角度で色の流れる方向を決め、放射状は円・楕円の形を選んで色の広がり方を決められます。
カラーストップを編集する
カラーバーをクリックすると新しいストップが追加され、ハンドルをドラッグすると移動、ハンドルをクリックすると削除されます。各ストップの色と位置（%）を調整して、思いどおりの色の流れを作りましょう。
プレビューで確認する
調整するたびに、結果が即座にプレビューへ反映されます。背景・ボタン・バナーなど実際に使う場所を思い浮かべながら、配色と方向を整えましょう。初めてなら、おすすめグラデーションから好みのプリセットを選び「エディタで開く」から始めるのも良い方法です。
CSS コードをコピーする
完成すると、CSS 出力領域に background コードが自動生成されます。コピーボタンでクリップボードに保存し、CSS ファイルやコンポーネントのスタイルにそのまま貼り付けましょう。
思いどおりの雰囲気のグラデーションを自作
色、角度、ストップの位置を調整しながら、グラデーションをリアルタイムにプレビューできます。背景、カード、ボタン、バナーに合う色の流れをその場で確認しながら、好みのスタイルをすばやく作れます。
完成した CSS コードをそのままコピー
作成したグラデーションは CSS の background コードとして自動生成されます。コピーボタンを押すと、現在の設定を含むコードをクリップボードに保存して、プロジェクトにそのまま貼り付けられます。
グラデーションの使用例
グラデーションは、単調な画面に深みと雰囲気を加えるいちばん簡単な方法です。
ヒーロー・バナーの背景
メインビジュアルにブランドカラー基調のグラデーションを敷けば、画像なしでも完成度の高い背景が作れます。画像より軽いので、読み込み速度にも有利です。
ボタン・カードのアクセント
ボタンやカードにさりげないグラデーションを適用すると、フラットな単色より目を引く UI になります。同じ色相で明るさだけ変えた 2 つのストップから始めると失敗しにくいです。
サムネイル・ポスターの背景
YouTube のサムネイル、イベントポスター、SNS カードの背景に活用しましょう。テキストが乗る場所を考えて明度差の小さい配色を選べば、読みやすさを保てます。
ダークモード向けの背景
暗い色同士をつなぐグラデーションは、ダークテーマの画面に奥行きを与えます。真っ黒の代わりに濃紺や紫系を混ぜると、やわらかい印象になります。
おすすめグラデーション
プリセットをエディタで調整するか、CSS コードをコピーして利用できます。 背景、ボタン、カード、バナー、ポスターに合わせて色、ストップ、角度を調整してください。
background: linear-gradient(90deg, #0066cc 0%, #2997ff 100%);background: linear-gradient(60deg, #ff5e62 0%, #ff9966 100%);background: linear-gradient(120deg, #2193b0 0%, #6dd5ed 100%);background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);background: linear-gradient(45deg, #ee9ca7 0%, #ffdde1 100%);background: linear-gradient(110deg, #00c6ff 0%, #7d5fff 50%, #ff5edf 100%);background: radial-gradient(ellipse, #ffd86f 0%, #fc6262 100%);よくある質問
どのグラデーションの種類に対応していますか？
線形グラデーションと放射状グラデーションに対応しています。 線形グラデーションは、色が一方向に自然につながる方式です。角度を調整して、左から右、上から下、斜め方向など、好きな流れを作れます。 放射状グラデーションは、中心から外側へ色が広がる方式です。光がにじむ背景、強調エリア、やわらかなポイント効果を作るときに便利です。 活用例) 線形グラデーション：ボタン、バナー、カードの背景 放射状グラデーション：ヒーロー背景、ポイント効果、照明のような演出
CSS コードをコピーできますか？
はい、作成したグラデーションは CSS の background コードとしてそのままコピーできます。 たとえば線形グラデーションを作ると、次のような形のコードが生成されます。
background: linear-gradient(90deg, #0066cc 0%, #2997ff 100%);コピーしたコードは、CSS ファイル、React/Vue コンポーネントのスタイル、HTML のインラインスタイル、Tailwind のカスタムスタイルなどで活用できます。
カラーストップの数に制限はありますか？
カラーストップとは、グラデーションの中で色が始まったり変わったりする位置のことです。 通常は 2 つの色だけでも基本的なグラデーションを作れますが、カラーストップを増やすと、複雑で豊かな色の流れを作れます。 たとえば、青から紫へつながる単純な背景は 2 つのストップで十分ですが、虹色や複合的な背景のように複数の色が連なるデザインでは、3 つ以上のストップを使うとよいでしょう。 ただし、カラーストップが多すぎると色の流れが複雑になりやすいため、一般的な UI デザインでは 2〜4 個ほどをおすすめします。
おすすめグラデーションは編集できますか？
はい。おすすめグラデーションはそのままコピーして使うこともできますし、エディタで開いて色や角度を編集することもできます。 最初から色を選ぶのが難しい場合は、おすすめプリセットをまず選び、ブランドカラーやプロジェクトの雰囲気に合わせて少しずつ調整する使い方がおすすめです。
グラデーションはブラウザできれいに表示されますか？
現在の主要ブラウザは CSS の linear-gradient() と radial-gradient() に対応しています。 色補間や表示結果はブラウザ、ディスプレイ、色設定によってわずかに異なる場合があります。公開前に対象とするブラウザと端末で確認してください。