Webサイトのカラーにグラデーションを取り入れることで、サイトに温かみや深みを与えられます。よく使われるのが線状のグラデーションを作れるlinear-gradient()ですが、思い通りのグラデーションを作るのはなかなか難しいです。
そこで本記事では初心者向けにlinear-gradient()の使い方について紹介していきます。理解を深めて、自由自在にCSSでグラデーションを作れるようになりましょう。
linear-gradient()の基本的な記述方法- 3色以上の色を使ったグラデーションの作り方
linear-gradient()の使用例
無料でプログラミングの質問ができるサービス
30日間無料でWeb制作が学べるZeroPlus Gate！
- Web制作に特化
- 50本以上の動画教材で学べる
- 30日間に4回の学習サポート面談がある
- Slackで質問し放題
目次
linear-gradient()とはCSSで「線形グラデーション」を作成するための記述
linear-gradient()とは、CSSで「線形グラデーション」を作成するための記述です。
グラデーションとは色調の段階的な変化
グラデーションとは、色調の段階的な変化のことです。プログラミングスクール「ZeroPlus」のメインカラーに使われているグラデーションを事例にして解説します。
上のように「明るいオレンジ色（#ffbb1e）」から「赤っぽいオレンジ色（#ff9158）」へと徐々に変化していくのは、グラデーションの一例です。
linear-gradient()の使い方
linear-gradient()の使い方について解説していきます。
linear-gradient()の基本的な書き方①（角度で指定する）
linear-gradient()を使うと、グラデーションの角度、開始時の色、終了時の色など、さまざまなスタイルを一括で指定できます。基本的な記述方法は以下のとおりです。
background: linear-gradient(角度, 開始する色, 終了する色);これを実際のコードを使って解説します。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
background: linear-gradient(90deg, #ffbb1e, #ff9158);linear-gradient()を使って、基本的な2色のグラデーションを作成する場合には角度、開始時の色、終了時の色など３つの値を記述するのみです。「deg」は耳慣れないワードかもしれませんが、日本語で角度の「°」を表す英単語です。
「deg」による指定を理解するには、時計をイメージしていただくのがおすすめです。
グラデーションの角度（方向）の初期値は180degのため、方向を何も指定しない場合には上から下の垂直方向、時計の「6」の方向にカラーが変化します。
0degは下から上の垂直方向、時計でいうところの「12」の方向を指します。正の値を記述すると「時計回り」に回転します。たとえば「90deg」なら、時計の「3」の方向へとカラーが変化します。反対に、負の値を記述すると「反時計回り」に回転します。-90degならば時計の「9」の方向へカラーが変化します。
linear-gradient()の基本的な書き方②（方向で指定する）
linear-gradient()には、角度の代わりに、方向で色の変化を指定する方法があります。記述方法は以下のとおりです。
background: linear-gradient(to 方向, 開始する色, 終了する色);「to 方向」の"方向"の箇所には「top」「right」「bottom」「left」のいずれかの値を記述します。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
background: linear-gradient(to right, #ffbb1e, #ff9158);この例ではto rightと記述したため、右方向へのグラデーションが表示されました。また「to 方向」の指定方法は、2つ方向を指定することで斜め方向へのグラデーションも設定できます。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
background: linear-gradient(to bottom right, #ffbb1e, #ff9158);今回の例では、to bottom rightを指定したため、右下へ向かってグラデーションが作られています。
「to 方向」の記述の方法は、おおまかに上下左右でグラデーションの向きを指定する方法です。「角度」で指定するように、詳細なグラデーションの向きを指定できません。直感的にグラデーションの向きを指定する場合には「to 方向」で指定し、細かくグラデーションの向きを調整する場合には「角度」による指定を使うとよいでしょう。
3色以上の色を含めるグラデーションを作る方法
「開始の色」と「終了の色」の間に「中間の色」を記述することで、3色以上で構成されるグラデーションを作る記述方法を紹介します。
background: linear-gradient(開始の色, 中間の色, 終了の色);See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
background: linear-gradient(#77a1d0, #79cbc9, #e684a0);このように3色を使って、グラデーションを作れました。中間の色を増やすことにより4色、5色と複数の色で構成されたグラデーションを作れます。
色が変わる位置（色経由点）を決める
色経由点 （color stops）とは、グラデーションの中で色が変わる位置です。色を記述した後に「位置」を「%」で記述することで、任意の位置を色経由点にできます。
background: linear-gradient(方向, 開始の色 位置, 終了の色 位置);位置を特に指定しない場合には、それぞれの色が均等になるように自動で配置されます。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
background: linear-gradient(to right, red, green, blue);このように、赤・緑・青が均等な割合で変化します。次に3つの色に対してそれぞれ「位置」を指定します。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
background: linear-gradient(to right, red 20%, green 60%, blue 90%);上記の指定により、
- 開始の色が0%から20%まで赤
- その後20%から60%で赤から緑へのグラデーション
- さらに60%から90%で緑から青へのグラデーション
が適用され、90%から100%が青で塗りつぶされるようになります。
効率よくグラデーションを実装するためにCSS gradientを利用する
「linear-gradient()の仕組みを理解しても、色や角度、位置を細かく調整するのは難しいことがあります。そこで、グラデーションをシミュレーションできるツール「CSS Gradient」」の利用をおすすめします。CSS Gradientを使えば、直感的な操作でさまざまなグラデーションを簡単に調整でき、生成されたソースコードをそのままCSSにコピペして使えます。
コーダーを目指すうえでlinear-gradient()の理解は重要ですが、ある程度習得した後はCSS Gradientのようなツールを活用して、効率よくコーディングを進めましょう。
linear-gradient()の使用例
linear-gradient()の使用例を紹介します。
背景色として使用する
backgroundプロパティの色のところに、linear-gradient()を指定することで背景色をグラデーションに指定できます。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
background: linear-gradient(45deg, #00a8be 0, #43cfe8 60%, #00a8be 100%);
CSSカスタムプロパティと一緒に使う
特にグラデーションの使用箇所が多いサイトのコーディングでは、CSSカスタムプロパティを使って、コードの記述量が多いlinear-gradient()を変数の中に格納しておくと、コーディングを効率化できます。
グラデーションを使う箇所では、変数をvar()で呼び出すだけになるため、記述するコードの量を抑えられます。またカラーに変更があったときのメンテナンスの手間も減らせます。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
:root {
--primary-color: #ffbb1e;
--secondary-color: #ff9158;
--main-gradation: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}
.sample {
background: var(--main-gradation);
}参考記事
画像にフィルターをかける
次は、linear-gradient()を使って画像の上にグラデーションのかかったフィルターを作る方法を紹介します。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
まずは、画像を読み込みます。
.sample-box {
background: url(https://zero-plus.io/media/wp-content/uploads/2022/03/filter-sample.jpg);
width: 600px;
height: 600px;
position: relative;
}その上に、linear-gradient()を使用して、背景色にグラデーションをかけた擬似要素を画像いっぱいに広げて配置していきます。
.sample::before {
content: "";
background: linear-gradient(90deg, #0003, #000d);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}色を指定する際に不透明度を少し下げることで、画像の上に薄くグラデーションによるフィルターをかけられました。
テキストにアンダーラインを引く
linear-gradient()を使ってテキストの下にアンダーラインを簡単に引けます。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
HTMLでテキストを用意し、linear-gradient()を用いてアンダーラインを引きます。
<p class="sample-txt">
<span class="sample-marker">マーカーも引けるのだ！</span>
</p>次に「開始の色」の指定を「transparent」に設定し、透明な状態にします。一方、アンダーラインの色は「終了の色」で指定します。
.sample-marker {
background-image: linear-gradient(transparent 50%, #ffbb1e 0%);
}アンダーラインの太さを変更したい場合は、「transparent」の位置の%を調節しましょう。%の値を小さくすれば、アンダーラインが太くなり、%の値を大きくすればアンダーラインは細くなります。
色の異なる帯を作る
グラデーションが変わる位置を揃えることで、帯のような見た目を作れます。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
background: linear-gradient(
to right,
red 33%,
green 33%,
green 66%,
blue 66%
);グラデーションが変わる位置を揃えることで、帯のような見た目を作れます。
前の色が終わるタイミングと次の色が始まるタイミングを揃えることで、グラデーションの生じない指定を作れるわけです。使用頻度はあまり高くない技術ですが、試しに実装してみることでlinear-gradient()の理解がぐっと深まります。
linear-gradient()を使ってみよう
本記事で紹介した線状のグラデーションを作るためのlinear-gradient()の記述方法について、ポイントを以下にまとめます。
- 基本的な書き方：
linear-gradient(向き, 開始の色, 終了の色) - 向きの指定方法：
数値 + deg（例:45deg）またはto ＋ 方向（例:to right） - 色の追加：開始と終了の間に中間の色を記述すると、3色以上のグラデーションが作れる
- 色経由点の指定：色の後に
数値 + %を指定することで、色が変わる位置を調整できる
グラデーションはサイトに深みや温かみを加えるため、多くのWebサイトで使われています。コーダーを目指す方にとって、習得しておきたい技術です。この記事を参考にして、思い通りのグラデーションを作れるようになりましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
