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

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

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

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

---

💡 今回紹介しないもの

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

👆 メンターやってます 👆

線形グラデーション

.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色以上のグラデーション

.hoge {
    background-image: linear-gradient(to right, #3b41c5 0%, #a981bb 50%, #ffc8a9 100%);
}

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

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

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

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

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

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

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

【初学者・中級者の方】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

初級者から中級者まで対応できる、数少ないサービスです。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

円形グラデーション

.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色以上のグラデーション

.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);
}

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

中心(=0%)が真ん中の場合は、closest-cornerとfarthest-corner / closest-sideとfarthest-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

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

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

Gradient Hunt

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

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

CSS Gradient

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

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

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

GRADIENT BACKGROUNDS

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

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

独学に限界を感じていませんか？