模写修行メディア

CSSで背景をグラデーションにする方法を解説!

CSSではbackground-imageを使うことで、背景をグラデーションにすることができます。グラデーションには種類が6つありますが、この記事では下の4つを紹介します。

  • 線形グラデーション(linear-gradient)
  • 円形グラデーション(radial-gradient)
  • 反復線形グラデーション(repeating-linear-gradient)
  • 反復円形グラデーション(repeating-radial-gradient)

使用頻度が多いのはこの4つです。


💡 今回紹介しないもの

  • 扇形グラデーション(conic-gradient)
  • 反復扇形グラデーション(repeating-conic-gradient)

扇形グラデーションは今回は紹介しません。機会があれば、リライトして追加するか、別記事で紹介したいと思います。

参考までに...
個人的には今まで実際のプロジェクトで、扇形グラデーションを使ったことはありません。多くの方にとって、ほとんど使う機会はないかもしれません。

線形グラデーション

線形グラデーション
.hoge {
    background-image: linear-gradient(#ff9a9e, #fad0c4);
}

線形グラデーションの基本的な書き方です。この場合、上から下へ向かって、#ff9a9e→#fad0c4へグラデーションします。

これ以降、詳しい仕様や具体例を紹介します。

グラデーションの方向を指定する

.hoge {
    background-image: linear-gradient(to right, #ff9a9e, #fad0c4);
}

.hoge02 {
    background-image: linear-gradient(to top right, #ff9a9e, #fad0c4);
}

このようにto 〇〇を使って方向を指定できます。

グラデーションの方向

全パターンを用意しました。この画像の矢印の方向に向かってグラデーションします。to top leftのように2つ指定した場合、ベクトルが合成されると覚えると良いです。


.hoge {
    background-image: linear-gradient(45deg, #ff9a9e, #fad0c4);
}

角度を指定することも出来ます。

グラデーションの方向

時計回りになると覚えると良いです。

グラデーションの開始位置と終了位置

どこからどこまでグラデーションにするか指定する
.hoge {
    background-image: linear-gradient(to right, #ff9a9e 60%, #fad0c4 80%);
    /* ✋ 60~80%の間だけグラデーションになる */
    /* background-image: linear-gradient(to right, #ff9a9e 0% 60%, #fad0c4 80% 100%); */
    /* 👆 これでも同じ */
}

.hoge02 {
    background-image: linear-gradient(#ff9a9e 100px, #fad0c4 150px);
    /* ✋ pxも使える */
}

グラデーションの開始位置と終了位置を指定することも出来ます。これを応用すると、下のようなデザインも作れます。

サンプル
.hoge {
    background-image: linear-gradient(to right, #1f1f1f 50%, #424242 50%);
    /* background-image: linear-gradient(to right, #1f1f1f 0% 50%, #424242 50% 100%); */
    /* 👆 これでも同じ */
}

0~50%を#1f1f1fで、50~100%を#424242にしているので、グラデーションになる区間がなく、半分で区切られた背景ができます。

3色以上のグラデーション

3色以上のグラデーション
.hoge {
    background-image: linear-gradient(to right, #3b41c5 0%, #a981bb 50%, #ffc8a9 100%);
}

上の例は3色にしましたが、何色でも可能です。

背景画像の上にレイヤーを重ねる

画像の上にレイヤーを重ねる際も使える!

背景画像の上にレイヤーを重ねる際にも使えます。background-imageはカンマ区切りで複数の画像やグラデーション背景を設定できます。

background-imageで複数の背景画像を設定する方法を解説!

複数の背景画像を設定する方法は、上の記事で詳しく紹介しています。

backgroundで背景色や背景画像を設定する方法!

background関連のプロパティは、上の記事をご覧ください。

円形グラデーション

円形グラデーション
.hoge {
    background-image: radial-gradient(#ffe9e2, #ff9a9e);
}

円形グラデーションの基本的な書き方です。この場合、内側から外側へ向かって、#ff9a9e→#fad0c4へグラデーションします。

線形グラデーションと基本は同じですが、いくつか円形グラデーション固有の仕様もあるので、詳しく紹介します。

グラデーションの開始位置と終了位置

グラデーションの開始位置と終了位置
.hoge {
    background-image: radial-gradient(#ffe9e2 20%, #ff9a9e 70%);
    /* ✋ 20~70%の間だけグラデーションになる */
    /* background-image: radial-gradient(#ffe9e2 0% 20%, #ff9a9e 70% 100%); */
    /* 👆 これでも同じ */
}

線形グラデーションと同じように、開始位置と終了位置を指定できます。

注意!
後述しますが、グラデーションの中心位置やグラデーションの形を変更することができます。"デフォルト値の場合"は、上の画像のような開始位置と終了位置になると思ってください。

3色以上のグラデーション

3色以上のグラデーション
.hoge {
    background-image: radial-gradient(#3b41c5 0%, #a981bb 50%, #ffc8a9 100%);
}

線形グラデーションと同じように、3色以上指定できます。

グラデーションの中心位置

グラデーションの中心位置
.hoge {
    background-image: radial-gradient(at 0% 50%, #ffe9e2, #ff9a9e);
}

グラデーションの中心位置を変更することが出来ます。

グラデーションの中心位置

上の画像のように、左上が0% 0%で基準になります。50% 70%10px 20pxのような指定もできます。

グラデーションの形

グラデーションの形
/* 楕円 */
.hoge {
    background-image: radial-gradient(ellipse, #ffe9e2, #ff9a9e);
    /* 👆 デフォルトがellipseなので本来いらない */
}

/* 円 */
.hoge02 {
    background-image: radial-gradient(circle, #ffe9e2, #ff9a9e);
}
グラデーションの形
ellipse楕円(デフォルト)
circle

グラデーションの形を変更することが出来ます。

グラデーションのサイズ

グラデーションのサイズ
.hoge {
    background-image: radial-gradient(closest-side, #ffe9e2, #ff9a9e);
}
グラデーションのサイズ
closest-corner中心から1番近い頂点までグラデーション
closest-side中心から1番近い辺までグラデーション
farthest-corner中心から1番遠い頂点までグラデーション
(デフォルト)
farthest-side中心から1番遠い辺までグラデーション

テキストだとわかりにくいので、下の画像も参考にしてみてください。

グラデーションのサイズ

中心(=0%)が真ん中の場合は、closest-cornerfarthest-corner / closest-sidefarthest-sideは同じになります。

反復線形グラデーションと反復円形グラデーション

反復線形グラデーションと反復円形グラデーション
/* 反復線形グラデーション(repeating-linear-gradient) */
.hoge {
    background-image: repeating-linear-gradient(#ffe9e2 0%, #ff9a9e 10%);
}

/* 反復円形グラデーション(repeating-radial-gradient) */
.hoge {
    background-image: repeating-radial-gradient(#ffe9e2 0%, #ff9a9e 10%);
}

反復グラデーションの基本的な書き方です。どちらも0~10%の間をグラデーションし、それが繰り返されています。

例えば、反復線形グラデーションを応用すると、下のようなストライプの背景も作れます。

サンプル
.hoge {
    background-image: repeating-linear-gradient(-45deg, #f5f6fa, #f5f6fa 3px, transparent 3px, transparent 6px);
}

0~3pxを#f5f6fa、3~6pxをtransparentにして、それを繰り返しています。

アイディア次第では、もっと複雑な模様なども作ることができます。

グラデーションをアニメーションする方法

2つのパターンを紹介します。


💡 パターン1:background-positionを動かす

.hoge{
    background-image: linear-gradient(45deg, #fa8bff 0%, #2bd2ff 50%, #2bff88 100%);
    background-size: 400% 100%;
    animation-name: gradationAnimation;
    animation-duration: 8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes gradationTextAnimation{
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }
}

background-imageでグラデーションの背景を作って、その背景のbackground-positionを動かしています。


💡 パターン2:background-colorを動かす

.hoge{
    animation-name: gradationAnimation02;
    animation-duration: 8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes gradationTextAnimation{
    0% {
        background-color: #fa8bff;
    }
    50% {
        background-color: #2bd2ff;
    }
    100% {
        background-color: #2bff88;
    }
}

background-colorの値を変化させています。CSSアニメーションの仕様上、指定した色に滑らかに変化するので、結果的にグラデーションのようになります。


CSSアニメーション入門!transitionとanimationを解説!

CSSアニメーションに関しては、上の記事で詳しく紹介しています。

文字色をグラデーションにする方法

文字のグラデーションのスクリーンショット
<p class="text">グラデーションテキスト</p>
.text{
    font-size: 72px;
    font-weight: bold;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(45deg, #b465da 0%, #cf6cc9 33%, #ee609c 66%);
    display: inline-block;
}

このように文字色をグラデーションにすることもできます。

CSSで文字をグラデーションにする方法を解説!

上の記事で詳しく紹介しています。

グラデーションジェネレーター紹介

グラデーションを使用する際のカラーの選択はセンスや経験が必要です。

ジェネレーターを使用すれば、デザインが苦手な方でも良い感じのグラデーションにできるのでおすすめです。

WebGradients

WebGradientsのトップページのキービジュアル

ワンクリックでグラデーションのCSSをコピーできる一覧サイトです。180種類あり、サイトで使いやすいカラーが揃っています。

グラデーションをpngの画像でダウンロードすることができます。

Gradient Hunt

Gradient Huntのスクリーンショット

操作がシンプルで使いやすいサイトです。

サンプル数も多く、ヘッダーからLinearやRadialなど、絞り込むこともできます。また、Create Gradientからオリジナルのグラデーションの作成もできます。

CSS Gradient

CSS Gradientのスクリーンショット

細かな値を設定し、グラデーションを作成できます。

カラー数の追加や削除も可能で、細部までこだわったオリジナルのグラデーションが作成できます。

画像をアップロードし、そこからカラーを抽出してグラデーションを作成することもできます。

GRADIENT BACKGROUNDS

GRADIENT BACKGROUNDSのスクリーンショット

グラデーション関連のツールがまとまっている便利なサイトです。

左のタブからツールの切り替えができます。

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

模写修行を見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材