CSSグラデーションジェネレーター
2色以上のカラーストップを指定するだけで、linear-gradient・radial-gradientのCSSコードをリアルタイムのプレビューを見ながら生成できる無料ツール。角度や位置も自由に調整でき、生成したコードはワンクリックでコピー可能。
使い方のヒント
- カラーストップは最大6個まで追加でき、色と位置（%）を自由に調整して複雑なグラデーションも作成できます。
- 線形グラデーションの角度は0°で下から上、90°で左から右へ色が変化します。スライダーで直感的に調整できます。
- 円形（radial）グラデーションには角度の概念がなく、中心から外側へ放射状に色が変化します。
- 生成されたCSSコードは「CSSをコピー」ボタンでクリップボードにコピーし、そのままスタイルシートに貼り付けられます。
よくある質問
linear-gradientは指定した角度に沿って直線的に色が変化するグラデーションで、ボタンや背景の帯状デザインによく使われます。一方radial-gradientは中心点から外側へ円形または楕円形に色が広がるグラデーションで、光が当たっているような立体的な表現やスポットライト風の演出に向いています。
CSSのlinear-gradient()では、角度は度数（deg）で指定します。0degは下から上、90degは左から右、180degは上から下へと色が変化します。角度の基準は時計回りで、CSS独自の定義（数学の一般的な角度とは0度の向きが異なる）である点に注意してください。
カラーストップの位置は、グラデーションの開始点（0%）から終了点（100%）までのどの位置にその色を配置するかを示します。位置を偏らせることで、色の変化が緩やかな部分と急激な部分を作り分けられます。
linear-gradient・radial-gradientはIE10以降を含むすべての主要ブラウザ（Chrome・Firefox・Safari・Edge）でベンダープレフィックスなしにサポートされています。非常に古いモバイルブラウザへの対応が必要な場合を除き、追加の対応は不要です。
余談ですが ― CSSグラデーションが画像を置き換えた理由
CSS3以前のWebデザインでは、グラデーション背景を表現するために画像編集ソフトで作成したPNG・JPEG画像を背景に敷くのが一般的な手法でした。しかしこの方法は画像の読み込みによる表示速度の低下、レスポンシブデザインでの拡大時の画質劣化、色を1つ変えるだけでも画像を作り直す必要があるという保守性の低さなど、多くの課題を抱えていました。
2010年代前半にCSS3のlinear-gradient・radial-gradient構文がブラウザに実装されると、これらの課題は一気に解消されました。テキストだけで記述できるため軽量かつ拡大・縮小しても画質が劣化せず、色の変更もCSSファイルの数値を書き換えるだけで完結します。
初期の実装ではブラウザごとに異なるベンダープレフィックス（-webkit-・-moz-・-o-等）や構文の違いがあり、複数のプレフィックス付き記法を並べて書く必要がありましたが、W3Cでの標準化が進んだ現在では、主要ブラウザすべてでプレフィックスなしの標準構文が動作するようになっています。