CSSで斜めにグラデーションをかける方法を現役エンジニアが解説【初心者向け】

今回は、CSSで斜めにグラデーションを使う方法や活用方法について解説します。

 

CSSについて、よく分からないという方はCSSの書き方について解説した記事をご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

グラデーションの方向と色の数

CSSでグラデーションを作る場合、linear-gradient()を使用します。

(gradationではなく、gradientである点に注意が必要です。)

linear-gradient()では、グラデーションの方向や色の割合、グラデーションを構成する複数の色などを指定します。

そのため画像編集ソフトを使用しなくても、色々なグラデーションを作成することが可能です。

 

また、色だけを指定した場合、上から下へグラデーションが作成されます。

以下、色だけを指定したコード例です。

/* background: linear-gradient(色1, 色2, 色3,・・・); */
background: linear-gradient(turquoise, tomato, lightgreen, pink);

/* background: linear-gradient(色1 色1の割合, 色2 色2の割合, ・・・
); */
background: linear-gradient(indigo 45%, gold 55%);

実行結果

斜めグラデーションのかけ方と指定方法

斜めのグラデーションを作るには、linear-gradientに方向の値を追加します。

方向は角度(deg)を指定する方法と開始位置を指定する方法のどちらかです。

右上から左下方向にかけて、ブルーからグリーンに変化する斜めのグラデーションを例に確認してみましょう。

以下、斜めのグラデーションを角度で指定するコード例です。

/* background: linear-gradient(方向[角度], 色1, 色2); */
background: linear-gradient(45deg, blue, green);

以下、斜めのグラデーションで開始位置をしている方法です。

/* background: linear-gradient(to 開始位置, 色1, 色2); */
background: linear-gradient(to top right, blue, green);

実行結果

どちらも、同じグラデーションを作成できました。

また、開始位置を指定する場合には、90度または45度の角度でグラデーションが作成されることに注意が必要です。

角度を指定する場合には、degという単位を使用します。

degはdegree(度)を表すものです。

 

では、角度を指定してグラデーションを作る場合に、角度とグラデーションの方向の関係について確認してみましょう。

グラデーションの角度がわかりやすいように、色の割合を50%で作成してみます。

HTML

<div class="box1">0deg</div>
<div class="box2">45deg</div>
<div class="box3">90deg</div>
<div class="box4">135deg</div>
<div class="box5">180deg</div>
<div class="box6">-45deg</div>
<div class="box7">-90deg</div>
<div class="box8">-135deg</div>

CSS

.box1{
  background:linear-gradient(0deg, orange 50%, tomato 50%);
}
.box2{
  background:linear-gradient(45deg, orange 50%, tomato 50%);
}
.box3{
  background:linear-gradient(90deg, orange 50%, tomato 50%);
}
.box4{
  background:linear-gradient(135deg, orange 50%, tomato 50%);
}
.box5{
  background:linear-gradient(180deg, orange 50%, tomato 50%);
}
.box6{
  background:linear-gradient(-45deg, orange 50%, tomato 50%);
}
.box7{
  background:linear-gradient(-90deg, orange 50%, tomato 50%);
}
.box8{
  background:linear-gradient(-135deg, orange 50%, tomato 50%);
}

実行結果

 

orangeからtomatoにグラデーションを作成してみました。

上記の例のように角度にはマイナスの値を設定することも可能です。

また、マイナスの値を入れると逆方向のグラデーションになります。

 

[PR] Webデザインで副業する学習方法を動画で公開中

実際に試してみよう

これまでの知識をもとに様々なグラデーションを作成してみましょう。

以下、この記事で使用したCSSの関数を使用したコード例です。

HTML

<div class="box1">sky</div>
<div class="box2">earth</div>
<div class="box3">girl</div>
<div class="box4">zebra</div>

CSS

.box1{
  background:linear-gradient(20deg, #8ef5f1, #476ec9, #d6bd60);
}
.box2{
  background:linear-gradient(60deg, #219c68, #77b8d4, #d6bd60);
}
.box3{
  color:black;
  background:linear-gradient(45deg, transparent 50%, #eb81c4 50%, #e62044);
}
.box4{
  color:tomato;
  background:linear-gradient(125deg, white 20%, black 20%, black 40%, white 40%, white 60%, black 60%, black 80%, white 80%);
}

実行結果

角度を自由に設定できるため、様々なグラデーションを作ることができます。

色の割合を工夫することで、境界線を作ったり、しま模様をつくることも可能です。

さらに、ボックスの形なども工夫すれば、三角形なども作れるでしょう。

linear-gradient()を使って色んな表現ができるようになりましょう。

 

監修してくれたメンター

メンター 橋本真理 フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。

 

TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。