【CSS】グラデーション色々なパターンを解説！

シュウ

今回は【CSS】グラデーション色々なパターン
の解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
linear-gradient、radial-gradientなどの使い方について学びたい方へ
今回はグラデーション色々なパターンについて解説しております。

[記事の内容]

gradientについて

gradientとは、グラデーションを指定する際に使用します。
書き方は以下のようになります。

/*--linear(線形)--*/
background: linear-gradient(開始色,終了色);

/*--radial(円形)--*/
background: radial-gradient(中央の色,外側の色);

グラデーションのパターンについて

CSSで使えるグラデーションは、Webデザインに深みと奥行きを与え、訪れる人に洗練された印象を与えるのに役立ちます。しかし、様々な種類のグラデーションが存在するため、どれを選べば良いのか迷ってしまうこともあるでしょう。

そこで今回は、CSSで使えるおすすめのグラデーションパターンをご紹介します。
それぞれのグラデーションの特徴や具体的な実装方法、サンプルコードなどを解説するので、ぜひ参考にしてみてください。

線形グラデーション（linear-gradient）

最も基本的なグラデーションで、2点間の色の変化を滑らかに表現します。
Webサイトのヘッダーやフッター、ボタンなどに幅広く活用できます。

線形グラデーション（linear-gradient）

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>

.gradient {
    /*--グラデーション指定以外　省略--*/
	background: linear-gradient(to right, #de6161, #2657eb); /* 左から右へ、赤から青へ */
}

放射グラデーション（radial-gradient）

中心点から外側に向かって色の変化を表現します。
ロゴやアイコンの背景などに適しており、奥行きのあるデザインを演出できます。

放射グラデーション（radial-gradient）

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>

.gradient {
    /*--グラデーション指定以外　省略--*/
	background: radial-gradient(circle at center, #de6161, #2657eb); /* 中心から、赤から青へ */
}

角度付き線形グラデーション（linear-gradient with angle）

開始点と終了点だけでなく、グラデーションの方向を角度で指定できます。
斜めのラインやストライプ状のグラデーション表現に有効です。

角度付き線形グラデーション（linear-gradient with angle）

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>

.gradient {
    /*--グラデーション指定以外　省略--*/
	background: linear-gradient(45deg, #de6161, #2657eb); /* 45度方向、赤から青へ */
}

複数色の線形グラデーション（linear-gradient with multiple colors）

2色だけでなく、複数の色を指定することで、より複雑で美しいグラデーションを表現できます。
色の割合や配置を調整することで、様々なバリエーションを作成できます。

複数色の線形グラデーション（linear-gradient with multiple colors）

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>

.gradient {
    /*--グラデーション指定以外　省略--*/
	background: linear-gradient(to right, #FEAC5E 20%, #C779D0 40%, #4BC0C8 60%, #00bf8f 80%);
	/* 左から右へ、オレンジ、紫、紫、緑 */
}

透過付きグラデーション（linear-gradient with transparency）

色の透明度を指定することで、柔らかい印象を与えるグラデーションを作成できます。
ボタンのホバー効果や背景などに活用できます。

透過付きグラデーション（linear-gradient with transparency）

SHU BLOG

<div class="gradient">
 <p>SHU BLOG</p>
</div>

.gradient {
    /*--グラデーション指定以外　省略--*/
	background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)); 
	/* 左から右へ、半透明の赤から半透明の青へ */
}