CSSグラデーションジェネレーター
2色以上のカラーストップを指定するだけで、linear-gradient・radial-gradientのCSSコードをリアルタイムのプレビューを見ながら生成できる無料ツール。角度や位置も自由に調整でき、生成したコードはワンクリックでコピー可能。
CSSグラデーションとは
CSSグラデーションは、2つ以上の色を滑らかにつないだ帯や放射状の模様を、画像を使わずスタイルシートだけで描く仕組みです。linear-gradient() は指定した角度に沿って直線的に色が移り変わり、radial-gradient() は中心から外側へ円を描くように広がります。テキストで書けるため軽く、拡大しても粗くならず、色を変えたいときは数値を書き換えるだけで済みます。
このツールは、種類・角度・カラーストップを画面上で調整しながら結果をその場で確かめ、できあがったCSSをそのままコピーできます。カラーストップは最大6個まで置け、それぞれ色と位置（%）を指定できます。2個未満ではグラデーションにならないためエラーになります。なお角度はCSS独自の取り方で、0degが下から上、90degが左から右です。数学で使う角度とは0の向きが違う点に注意してください。円形（radial）には角度の概念がないため、角度の指定は効きません。
CSSグラデーションの作り方
- 種類を選ぶ 直線的に色を変えたいなら線形（linear）、中心から放射状に広げたいなら円形（radial）を選びます。
- 角度を決める 線形のときだけ有効です。0degが下から上、90degが左から右で、時計回りに増えます。スライダーで動かしながら向きを確かめられます。
- カラーストップを置く 「色を追加」で最大6個まで増やせます。各ストップに色と位置（%）を指定すると、色が切り替わる場所を細かく操れます。
- プレビューで確かめる 設定を変えるたびにプレビューが描き直されます。色の境目が急すぎないか、狙った向きかをその場で判断できます。
-
CSSをコピーする
「CSSをコピー」でクリップボードに入ります。スタイルシートの
backgroundにそのまま貼り付けられます。
使いこなすためのヒント
- カラーストップは最大6個まで追加でき、色と位置（%）を自由に調整して複雑なグラデーションも作成できます。
- 線形グラデーションの角度は0°で下から上、90°で左から右へ色が変化します。スライダーで直感的に調整できます。
- 円形（radial）グラデーションには角度の概念がなく、中心から外側へ放射状に色が変化します。
- 生成されたCSSコードは「CSSをコピー」ボタンでクリップボードにコピーし、そのままスタイルシートに貼り付けられます。
CSSグラデーションの活用シーン
ボタンやバッジに立体感を出す
上から下へわずかに暗くなる線形グラデーションを敷くと、単色より押せそうな見た目になります。色差を小さく保つのが自然に見せるこつです。
ヒーロー領域の背景を作る
ページ上部の広い帯に2色以上のグラデーションを敷けば、画像を1枚も読み込まずに印象のある背景を用意できます。表示速度を落としません。
スポットライト風の演出
円形グラデーションで中心を明るく、外側を暗くすると、光が当たっているような表現になります。
画像の上に文字を重ねる
写真の上へ半透明の黒から透明へ向かう線形グラデーションを重ねると、写真の明るい部分でも文字が読めるようになります。
CSSグラデーションに関する用語集
- linear-gradient
- 指定した角度に沿って直線的に色が移り変わるグラデーションを描くCSSの関数です。帯状の背景やボタンの塗りに向いています。
- radial-gradient
- 中心点から外側へ円形または楕円形に色が広がるグラデーションを描くCSSの関数です。角度の概念を持ちません。
- カラーストップ
- グラデーションの途中に置く「この位置にこの色」という指定です。位置は開始点を0%、終了点を100%とする割合で表します。
- 角度（deg）
- linear-gradient で色が変わっていく向きです。CSSでは0degが下から上、90degが左から右で、時計回りに増えます。数学の一般的な角度とは0の向きが異なります。
- ベンダープレフィックス
-webkit-のように、標準化前の機能を各ブラウザが独自に提供していたときに付けた接頭辞です。グラデーションは標準化が済んでいるため、現在は不要です。- background プロパティ
- 要素の背景を指定するCSSのプロパティです。グラデーションは背景画像の一種として扱われるため、ここに書きます。
よくある質問
余談ですが ― CSSグラデーションが画像を置き換えた理由
CSS3以前のWebデザインでは、グラデーション背景を表現するために画像編集ソフトで作成したPNG・JPEG画像を背景に敷くのが一般的な手法でした。しかしこの方法は画像の読み込みによる表示速度の低下、レスポンシブデザインでの拡大時の画質劣化、色を1つ変えるだけでも画像を作り直す必要があるという保守性の低さなど、多くの課題を抱えていました。
2010年代前半にCSS3のlinear-gradient・radial-gradient構文がブラウザに実装されると、これらの課題は一気に解消されました。テキストだけで記述できるため軽量かつ拡大・縮小しても画質が劣化せず、色の変更もCSSファイルの数値を書き換えるだけで完結します。
初期の実装ではブラウザごとに異なるベンダープレフィックス（-webkit-・-moz-・-o-等）や構文の違いがあり、複数のプレフィックス付き記法を並べて書く必要がありましたが、W3Cでの標準化が進んだ現在では、主要ブラウザすべてでプレフィックスなしの標準構文が動作するようになっています。