模写修行メディア

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

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

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

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


💡 今回紹介しないもの

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

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

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

👇 メンターやってます 👇

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

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

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

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

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターやってます 👆

この記事の目次

線形グラデーション

線形グラデーション
.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関連のプロパティは、上の記事をご覧ください。

【駆け出しの方へ】独学に限界を感じてませんか?

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

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

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

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービス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色以上のグラデーション

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のスクリーンショット

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

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

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

現役エンジニアによるメンタリングサービス作りました!

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

👇 こんな方のためのサービスです。

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

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

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

実務レベルを体験するためのコーディング練習教材