CSSグラデーションの作り方まとめ【コピペOK！】

CSSでグラデーションってどうやって作るの？

ボタンや背景色でグラデーションのデザインは非常によくあります。

グラデーションと言っても、

など様々な種類があります。

今回はCSSでグラデーションを実装をする方法を解説していきます。

また、コーディングする際にはデザインカンプからグラデーションの情報を読み取る必要があります。

その方法については以下の記事を参照下さい。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

CSSグラデーションの作り方

まず基本的なCSSの書き方は以下になります。

/* 線形グラデーション(直線) */
background: linear-gradient(色の指定);

/* 円形グラデーション(放射線状) */
background: radial-gradient(色の指定);

線形グラデーションは『端から端に向かってグラデーション』

円形グラデーションは『中心から外側に向かってグラデーション』

となります。

あとは『色の指定』で色の方向や種類、数などを指定していきます。

今回の記事で基本となるHTMLは以下になります。

<div class="box"></div>

これに対してCSSの『background』を追記していきます。

その他レイアウトのためのCSSは書いていますが、デザインに応じてclass名や数値は変更して下さい。

線形グラデーション（linear-gradient）の書き方

まずは線形グラデーションの書き方から解説していきます。

縦向きに線形グラデーション

線形グラデーションの書き方は以下になります。

/* 線形グラデーション縦向き */
.box {
  background: linear-gradient(to 方向, 開始の色, 終了の色);
}

そして上から下にかけて緑色→黄色にグラデーションさせるには以下のように書きます。

/* 線形グラデーション縦向き */
.box {
  background: linear-gradient(to bottom, green, yellow);
}

See the Pen
CSSグラデーション（横向き：左から右） by junpei (@junpei-sugiyama)
on CodePen.

方向に関してはデフォルトで上から下という向きなので、以下のような書き方でもOKです。

/* 線形グラデーション縦向き */
.box {
  background: linear-gradient(to bottom, green, yellow);
}

/* これでも同じ */
.box {
  background: linear-gradient(green, yellow);
}

色の向きを変えたい場合（下から上）は、色を入れ替えるか『bottom』を『top』にすればOKです。

/* 色を入れ替える */
.box {
  background: linear-gradient(yellow, green);
}

/* 方向をtopに指定 */
.box {
  background: linear-gradient(to top, green, yellow);
}

See the Pen
CSSグラデーション（縦向き：方向指定なし） by junpei (@junpei-sugiyama)
on CodePen.

横向きに線形グラデーション

横向きの線形グラデーションも縦向きと同じで、縦向きでは『bottom』『top』で指定していたところを『right』『left』で指定します。

/* 線形グラデーション横向き(左から右) */
.box {
  background: linear-gradient(to right, green, yellow);
}

/* 線形グラデーション横向き(右から左) */
.box {
  background: linear-gradient(to left, green, yellow);
}

See the Pen
CSSグラデーション（横向き：右から左） by junpei (@junpei-sugiyama)
on CodePen.

See the Pen
CSSグラデーション（横向き：右から左） by junpei (@junpei-sugiyama)
on CodePen.

斜めに線形グラデーション

斜めにグラデーションの書き方は以下になります。

/* 線形グラデーション斜め */
.box {
  background: linear-gradient(to 終了位置の方向, 開始の色, 終了の色);
}

つまり左上から右下に向かって緑色→黄色にグラデーションさせたい場合は以下のようになります。

/* 線形グラデーション斜め(左上から右下) */
.box {
  background: linear-gradient(to right bottom, green, yellow);
}

終了位置の方向『right bottom』が『右下』となります。

See the Pen
CSSグラデーション（斜め：右から左） by junpei (@junpei-sugiyama)
on CodePen.

ただしこの書き方では以下の4方向のみとなります。

さらに角度は45度となり、角度を変えたい場合は次のように書きます。

角度を指定して線形グラデーション

これまでは縦、横、45度しか出来ませんでしたが、角度を数値で指定することも可能です。

角度を指定する書き方は以下になります。

/* 線形グラデーション(角度指定) */
.box {
  background: linear-gradient(角度, 開始の色, 終了の色);
}

角度が30度の場合は『30deg』と書きます。

角度とグラデーションの向きの関係は以下になります。

0から時計回りに動いていくイメージです。

30度に指定した場合は以下のようになります。

/* 線形グラデーション(30度指定) */
.box {
  background: linear-gradient(30deg, green, yellow);
}

See the Pen
CSSグラデーション（斜め：角度指定） by junpei (@junpei-sugiyama)
on CodePen.

円形グラデーション（radial-gradient）の書き方

円形グラデーションは放射線状に色が変わっていくグラデーションになります。

『linear』を『radial』に変更すると線形から円形になります。

円形グラデーション

円形グラデーションの書き方は以下になります。

/* 円形グラデーション(放射線状) */
background: radial-gradient(内側の色、外側の色);

線形グラデーションと同様に『緑色→黄色』の順に指定すると以下のようになります。

/* 線形グラデーション縦向き */
.box {
  background: radial-gradient(green, yellow);
}

See the Pen
CSSグラデーション（角度指定：30度） by junpei (@junpei-sugiyama)
on CodePen.

片方を透過させるグラデーション

これまで2種類の色を指定してきましたが、片方を透過させることも出来ます。

書き方は至ってシンプルで、片方の色を透明色である『transparent』にすればOKです。

もちろん線形、円形ともに使えます。

線形グラデーションで片方を透過

/* 線形グラデーション(片方透過) */
.box {
  background: linear-gradient(green, transparent);
}

See the Pen
CSSグラデーション（透過） by junpei (@junpei-sugiyama)
on CodePen.

円形グラデーションで片方を透過

/* 円形グラデーション(片方透過) */
.box {
  background: radial-gradient(green, transparent);
}

See the Pen
CSSグラデーション（透過・円形） by junpei (@junpei-sugiyama)
on CodePen.

透過率を調整

先ほどまでは完全に透明の透過率100%でしたが、透過率を調整することも可能です。

例えば緑色は透過率0%(透過させない)で、黄色は透過率70%にする場合は以下のようになります。

/* 線形グラデーション(透過率調整) */
.box {
  background: linear-gradient(green, rgba(255,255,0,0.3));
}

RGBは色を表す表現方法です（R：red　G：green　B：blue）

rgbaというのは、色に加えて透過率が設定できます。

例えば黄色だとこのようになります。

上記の場合は0.3の部分が透過率となり、

となります。

0.3は透明寄りになりますね。

カラーコードについては以下のサイトが参考になります。

WEB色見本 原色大辞典 - HTMLカラーコード

また、16進数からRGBに変換するには以下のサイトが便利です。

RGBと16進数カラーコードの相互変換ツール - PEKO STEP

そして最初のコードで書くとこのようになります。

See the Pen
CSSグラデーション（透過率調整） by junpei (@junpei-sugiyama)
on CodePen.

下の黄色が少し薄くなっているのが分かるかと思います。

グラデーションの色が変わる位置を調整

これまでは色の変わる位置はデフォルトでしたが、位置を調整することが可能です。

例えば横向きの線形グラデーションの場合、左から50%（中央）までは緑色で、左から50%の位置から100%（右端）までをグラデーションにしたい場合は以下のように書きます。

/* 線形グラデーション(開始位置調整) */
.box {
  background: linear-gradient(to right, green 50%, yellow);
}

See the Pen
CSSグラデーション（開始位置調整） by junpei (@junpei-sugiyama)
on CodePen.

円形グラデーションも同様です。

/* 円形グラデーション(開始位置調整) */
.box {
  background: radial-gradient(green 50%, yellow);
}

See the Pen
CSSグラデーション（開始位置調整：円形グラデーション） by junpei (@junpei-sugiyama)
on CodePen.

グラデーションを3色以上にする方法

これまでは2色で設定してきましたが、3色以上にすることも可能です。

これは単純に色を追加すればOKです。例えば真ん中にオレンジ色を追加すると以下のようになります。

/* 線形グラデーション(2色) */
.box {
  background: linear-gradient(to right, green, yellow);
}

/* 線形グラデーション(3色) */
.box {
  background: linear-gradient(to right, green, orange, yellow);
}

See the Pen
CSSグラデーション（3色：線形グラデーション） by junpei (@junpei-sugiyama)
on CodePen.

円形グラデーションも同様です。

/* 円形グラデーション(3色) */
.box {
  background: radial-gradient(green, orange, yellow);
}

See the Pen
CSSグラデーション（3色：円形グラデーション） by junpei (@junpei-sugiyama)
on CodePen.

これも%で位置の調整は可能です。

ちなみに青色も追加して4色だとこのようになります。

See the Pen
CSSグラデーション（4色：線形グラデーション） by junpei (@junpei-sugiyama)
on CodePen.

See the Pen
CSSグラデーション（4色：円形グラデーション） by junpei (@junpei-sugiyama)
on CodePen.

この記事では原色を使っているのでかなりどぎつい色になっていますね。。。

画像にグラデーションを重ねる

グラデーションは画像に重ねることも可能です。

例えば画像に『緑色の透過率50%、黄色の透過率50%で右下へ』というグラデーションを重ねる場合は以下のようになります。

/* 画像に重ねる */
.box {
  background: linear-gradient(to right bottom, rgba(0, 128, 0, .5), rgba(255, 255, 0, .5)), url(画像パス);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

透過させないと画像の上に色が塗りつぶされるだけになってしまうのでご注意下さい。

See the Pen
CSSグラデーション（画像に重ねる） by junpei (@junpei-sugiyama)
on CodePen.

まとめ

今回はCSSグラデーションの作り方をまとめて解説しました。

グラデーションは実務でもよく使うので、ブクマしていつでもコピペ出来るようにしておくと便利かと思います。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！