CodeKitHubこのツールとは？
CSSグラデーションは、アップロードするファイルではなく、色のリストからブラウザが生成する画像です——linear-gradient()は指定した角度で直線に沿って色を遷移させ、radial-gradient()は中心点から外側に向かって色を遷移させます。どちらも2つ以上のカラーストップを受け付け、それぞれをグラデーション内の位置に任意で固定できます。
手書きするとグラデーションは微妙に間違えやすいものです——ストップの順序、パーセンテージの欠落、あるいは角度の値が逆方向を指してしまう（CSSの角度は数学の角度と異なり、'to top'から時計回りに進みます）といったミスが起こりがちです。このツールは構文を意識せずに済むようにします——ピッカーとスライダーで色と位置を設定し、プレビューボックスがリアルタイムで更新される様子を確認し、見た目が良くなったら生成されたCSSをコピーするだけです。
出典: CSS Images Module Level 3, W3C — linear-gradient()とradial-gradient()の構文を定義する仕様書。
なぜこれを使うのか？
- 色・位置・角度を変更するたびにライブプレビューが即座に更新——結果を見るためにページを再読み込みする必要はありません。
- ワンクリックで線形と放射状グラデーションを切り替え可能。放射状グラデーションでは適用されない角度コントロールは自動的に非表示になります。
- 固定の2色グラデーションに限定されず、カラーストップ（2〜4個）を追加・削除できます。
- 各ストップに独自の位置スライダーがあるため、ストップを均等に配置する必要はありません。
- 標準のlinear-gradient()/radial-gradient()構文で、そのまま貼り付け可能なCSSを出力します。
- すべてブラウザ内で完結——設定した内容はどこにもアップロードされません。無料、登録不要、モバイルでも動作します。
使い方
- グラデーションタイプとして線形（Linear）または放射状（Radial）を選びます。
- 線形グラデーションの場合、角度スライダーをドラッグします——90degは左から右、180degは上から下、という具合です。
- 各ストップの色と位置を設定します。最初のストップがグラデーションの開始色、最後のストップが終了色になります。
- 「+ ストップを追加」をクリックして最大4個までのストップを持つマルチカラーグラデーションを作成するか、✕ボタンでストップを削除します（最小2個）。
- 生成されたCSSをコピーして、backgroundまたはbackground-image宣言に貼り付けます。
例
入力
線形 · 角度: 90deg · ストップ: #f97316 (0%)、#ec4899 (100%)出力
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);左から右へオレンジからピンクへ変わるグラデーション——ボタンやバナー、ヒーローセクションの背景でよく使われるスタイルです。
線形グラデーション vs 放射状グラデーション
線形グラデーションは角度によって制御される直線に沿って色を遷移させ、バナーやボタン、方向性のある背景に便利です。放射状グラデーションは中心点から外側へ広がる輪の形で色を遷移させ、スポットライト効果やバッジ、グロー風の背景に適しています。このツールでは放射状グラデーションのデフォルトをボックス中央に配置した円形としており、最も一般的な放射状の用途をカバーしています。CSSは楕円形や中心をずらした位置もサポートしているため、必要であれば生成後のCSSをさらに手動で編集できます。
よくあるグラデーションのパターン
- 控えめなブランドアクセント：浅い角度で近い色相2色（例えば同じ色の2つの濃淡）を使った柔らかい背景の演出。
- 高コントラストのCTAボタン：90degまたは135degで彩度の高い補色2色を使った大胆でクリックしやすい見た目。
- 画像へのオーバーレイ：透明から単色への遷移（ピッカーの16進数の下でrgbaカラーとして不透明度を設定するか、コピー後に調整）をbackground-imageの上に重ねます。
- 多色レインボー/ブランドグラデーション：0〜100%の全範囲に3〜4個のストップを配置し、2色グラデーションよりも滑らかで段階的な遷移を実現します。
- 放射状スポットライト：0%付近に明るい中心ストップを置き、100%付近の暗い縁のストップへとフェードさせる、ヒーローセクションやカードのハイライトに便利な手法。
他のCSSツールとの組み合わせ
グラデーションは同じ要素上で角丸やシャドウとよく組み合わされます——グラデーションカードに柔らかいbox-shadowと角丸を合わせるのは一般的なUIパターンです。それぞれを個別に生成し、CSS宣言を要素に組み合わせて適用してください。
よくある質問
linear-gradient()とradial-gradient()の違いは何ですか？
linear-gradient()は指定した角度で直線に沿って色を遷移させます。radial-gradient()は中心点から外側へ広がる形状（円または楕円）で色を遷移させます。どちらも同じ種類のカンマ区切りカラーストップリストを受け付け、遷移の形状だけが異なります。
CSSグラデーションの角度はどう機能しますか？
CSSのグラデーション角度は'to top'（上向き、0deg）から時計回りに進みます。90degは右、180degは下、270degは左を指します——標準的な数学の角度とは逆の規則で、グラデーションを手書きする際によく混乱を招く原因です。
4個以上のカラーストップを使えますか？
はい——CSSグラデーションはカンマ区切りのカラーストップを任意の数だけ受け付けます。このツールは扱いやすいUIにするためインタラクティブなビルダーを4個までに制限していますが、生成されたCSSをコピーして、スタイルシート内で手動で「色 位置%」のエントリをさらにカンマ区切りで追加できます。
グラデーションが滑らかではなく縞模様に見えるのはなぜですか？
縞模様（バンディング）は通常、色相が離れすぎている色を少ないストップ数でつないでいる場合や、コントラストが非常に低い箇所でのブラウザ自体の色精度の限界によって発生します。中間色のストップを追加するか、色相が近い色を選ぶことで、一般的により滑らかな見た目になります。
CSSグラデーションをアニメーションさせられますか？
直接的にはできません——background-positionやtransformとは異なり、グラデーションはネイティブにアニメーション可能ではありません。ブラウザは任意の2つのグラデーション定義の間を補間できないためです。一般的な回避策としては、実サイズより大きいグラデーション上でbackground-positionをアニメーションさせる、あるいは色が1色だけ変わる場合はbackground-colorを遷移させる方法があります。