CSSでカラーを指定するときには1色だけのカラーだけではなく、2色や3色など複数色を指定することでグラデーションカラーにすることができます。
CSSでカラーをグラデーションにすることができるのは知ってたけど、コピペで済ませていることが多かったので、せっかくCSSでカラーをグラデーションにできるならCSSの書き方を理解しておきたいと思います。
CSSでカラーをグラデーションにする
CSSでカラーをグラデーションにするにはCSSのプロパティをbackgroundで指定します。
通常はCSSでbackgroundの値にカラーコードを指定すると、そのカラー1色が背景色として適用できますが、CSSでグラデーションにする場合にはbackgroundに関数を記述して、カラーを2色や3色などで複数色指定することで、グラデーションにすることができます。
- linear-gradient
- radial-gradient
linear-gradientは線形で「上から下」「左から右」「斜め」のグラデーションにすることができます。
radial-gradientは円形で一点から四方八方に放射状に広がるグラデーションにすることができます。
CSSでグラデーションカラーにするときに、線形、円形どちらのパターンでもグラデーションにする色を2色以上指定すると共に、グラデーションの向きや角度、そして始点や終点を決めることで好みのグラデーションを実現していけます。
CSSでカラーをグラデーションで指定できるようにするために「linear-gradient」と「radial-gradient」をどのようにCSSで記述していけばいいか、上画像の4色を使用する例でグラデーションカラーにするので読み進めてみてください。
ちなみに上画像もlinear-gradientで作りました。
グラデーションをlinear-gradientで指定
CSSでグラデーションをlinear-gradientで指定する場合は、linear-gradient関数をbackgroundの画像として扱うプロパティの関数として指定します。
.gradient {
width: 40%;
height: 200px;
background: linear-gradient(
#d64fcd,
#60b6ef,
#89d37a,
#f9ed7d
);
}
そしてliner-gradient()を指定したカッコの中に、グラデーションにする色を指定します。上のCSSでは「ピンク」「ブルー」「グリーン」「イエロー」のカラーを指定してます。
linear-gradientでグラデーションにする色を指定すると、上の画像のように「ピンク」「ブルー」「グリーン」「イエロー」の4カラーが縦方向で上から下に向かうレインボーのグラデーションが適用されます。
カラーを指定しただけで上から下方向にグラデーションになるのは初期値が適用された方向なためです。
linear-gradientで指定したカラー4色を上から下方向でグラデーションにすることができましたが、グラデーションにするカラー指定と共にグラデーションの「向き」を縦や横、「角度」をつけて斜めの方向に指定することができます。
縦方向のグラデーション
CSSでカラーをlinear-gradientでグラデーションにするときに、色の向きを縦方向のグラデーションにする場合には、カラー指定する値の上に「キーワード」や角度指定できる「deg」で縦方向のグラデーションにできます。
.gradient {
width: 40%;
height: 200px;
background: linear-gradient(
to top,
#d64fcd,
#60b6ef,
#89d37a,
#f9ed7d);
}
to topを指定すると、下から上の縦方向のグラデーションになります。
次は縦方向のグラデーションが上から下の場合です。
.gradient {
width: 40%;
height: 200px;
background: linear-gradient(
to bottom,
#d64fcd,
#60d6ef,
#89d37a,
#f9ed7d);
}
to bottomを指定することで上から下の縦方向のグラデーションになります。
(to 方向, 開始色, 終了色);
CSSで複数色のカラーでグラデーションにするときにto topやto bottomは、グラデーションの方向をキーワードで指定するもので、topやbottomの前に半角スペースを開けて記述してるtoがあることにより、「topへ」「bottomへ」となるため、進む方向と対角になる位置から目的の方向へのグラデーションに指定できるのです。
またdegという単位でグラデーションに角度をつける方法もあります。角度によっては、キーワードで縦方向を指定したのと同じ結果が得られます。
.gradient {
width: 40%;
height: 200px;
background: linear-gradient(
0deg,
#d64fcd,
#60d6ef,
#89d37a,
#f9ed7d);
}
to topの代わりに0degを指定すると下から上へ縦方向のグラデーションにすることができます。
.gradient {
width: 40%;
height: 200px;
background: linear-gradient(
180deg,
#d64fcd,
#60d6ef,
#89d37a,
#f9ed7d);
}
180degを指定した場合は、グラデーションの方向が上から下へ縦方向で、to bottomを指定したときと同じ結果を得られます。
(角度deg, 開始色, 終了色);
グラデーションの方向に記述した単位のdegは角度に使用する単位で、正の値で時計まわりに、負の値で反時計回りにグラデーションの方向を指定できるため、キーワードを使うよりも細かく方向を指定できるのが魅力かと思います。
横方向のグラデーション
linear-gradientでグラデーションにするときに、色の向きを横方向のグラデーションにする場合には、縦にしたときと同じように「キーワード」や角度指定できる「deg」で横方向のグラデーションを実現します。
.gradient {
width: 40%;
height: 200px;
background: linear-gradient(
to right,
#d64fcd,
#60d6ef,
#89d37a,
#f9ed7d);
}
キーワードのto rightをカラー指定の上に記述することで右方向へ、つまりグラデーションを右横に流すので対角になる左から右の方向にすることができます。
次は横方向のグラデーションが右から左の場合です。
.gradient {
width: 40%;
height: 200px;
background: linear-gradient(
to left,
#d64fcd,
#60d6ef,
#89d37a,
#f9ed7d);
}
キーワードのto leftをカラー指定の上に記述することで左方向へ、つまりグラデーションを左横に流すので対角になる右から左の方向にグラデーションにすることができます。
degの単位でグラデーションに角度をつけて横方向のグラデーションにする場合
.gradient {
width: 40%;
height: 200px;
background: linear-gradient(
90deg,
#d64fcd,
#60d6ef,
#89d37a,
#f9ed7d);
}
90degでグラデーションの角度を指定すると、指定したカラーが時計周りで90度の方向に回転して、左から右の方向にグラデーションします。90degはキーワードのto rightと同じ方向にできます。
.gradient {
width: 40%;
height: 200px;
background: linear-gradient(
-90deg,
#d64fcd,
#60d6ef,
#89d37a,
#f9ed7d);
}
-90degと負の値にすると、反時計周りで90度の方向に回転して右から左の方向にグラデーションします。キーワードのto leftと同じ方向にできます。
degの角度指定だとやはり細かくグラデーション方向を指定できるのが魅力である反面で、角度が何度のときに、どのくらいの角度でグラデーションにできるのか複雑な面も持ち合わせています。
そのため縦や横にまっすぐグラデーションにする指定には、キーワード指定するのが簡単かと思えます。
しかしCSSで斜めにグラデーションさせたい場合はdeg指定が活躍してくれます。以下で詳しく説明します。
斜めにグラデーション
CSSでカラーをグラデーションにしたいパターンとしては、斜めにグラデーションさせたい場合があります。
たとえば上の画像のように、4色を使用したカラーパターンで斜めに15度傾けてグラデーションさせた場合を例にCSSを指定します。
.gradient {
width: 40%;
height: 200px;
background: linear-gradient(
15deg,
#d64fcd,
#60d6ef,
#89d37a,
#f9ed7d);
}
角度はdegで指定ができるのでCSSでグラデーションにするカラー指定の上に15degと記述します。
するとボックスの大きさに合わせて左下から右上に色が変わるグラデーションを表示することができます。
このグラデーションの角度は先述してる、縦方向のグラデーションと横方向のグラデーションの指定をdegで角度指定したときの角度の数字を変更しただけなので、数字を変えることで好きな角度のグラデーションにすることができます。(上画像は-120deg指定)
CSSでカラーを斜めにグラデーションに指定するパターンは、キーワードでも可能です。
- to bottom right (左上から右下)
- to bottom left (右上から左下)
- to top right (左下から右上)
- to top left (右下から左上)
斜めにするグラデーションを細かい角度調整しなくてもいいのであれば、キーワードで指定すると簡単かもしれませんね。
グラデーションをradial-gradientで指定
次はCSSのradial-gradient関数をbackgroundの画像として扱えるプロパティの関数として指定することで、楕円と円形(正円)で放射状になったグラデーションが指定できるようにします。
楕円形のグラデーションする
CSSでbackgroundプロパティを指定した後ろにradial-gradient関数を記述してカッコの中に楕円形でグラデーションにしたいカラーを2色以上で指定します。
.gradient {
width: 40%;
height: 200px;
background: radial-gradient(
#d64fcd,
#60b6ef,
#89d37a,
#f9ed7d);
}
linear-gradientで線形のグラデーションのときと同じように例では、楕円のグラデーションには「ピンク」「ブルー」「グリーン」「イエロー」の4色を使用してます。
表示結果は以下の画像のように要素の真ん中を中心としてカラーが放射状でグラデーションします。
要素にCSSのbackgroundプロパティとradial-gradient関数でカラー指定しただけで楕円のグラデーションになるのは初期値のellipseというキーワードが指定されてるためです。
.gradient {
width: 40%;
height: 200px;
background: radial-gradient(
ellipse,
#d64fcd,
#60b6ef,
#89d37a,
#f9ed7d);
}
なので上のCSSのようにグラデーションにするカラーを指定した上にellipse,の指定を記述してもグラデーションの形状は同じく楕円の形状でグラデーションになります。
.gradient {
width: 40%;
height: 200px;
background: radial-gradient(
ellipse at 50px 20%,
#d64fcd,
#60b6ef,
#89d37a,
#f9ed7d);
}
そしてradial-gradientでキーワードのellipse,を指定した後に半角スペースを開けてatを記述、また半角スペースを開けてX軸とY軸方向の値をpxや％で指定することで、グラデーションの中心位置を移動させることができます。
例ではellipse at 50px 20%,を指定してるので、上辺から50px、左辺から20%の位置に楕円の中心を移動してます。
X軸とY軸方向にグラデーションの中心をpxや％で移動するだけでなく、キーワードを使うこともできます。たとえば下の画像のように楕円形で右上から左下の方向にグラデーションしたい場合。
ellipse at top right,をカラー指定の上に記述します。
.gradient {
width: 40%;
height: 200px;
background: radial-gradient(
ellipse at top right,
#d64fcd,
#60b6ef,
#89d37a,
#f9ed7d);
}
ellipse at top right,と指定した場合は、縦の表示位置が上、横の表示位置が右で右斜め上が楕円の中心になり、左斜め下の方向にグラデーションにすることができます。
他にも表示位置をコントロールするキーワードには以下を使用できます。
横の表示位置
- left
- center
- right
縦の表示位置
- top
- center
- bottom
円形のグラデーションにする
radial-gradient関数を指定した下に、円の形状を楕円にするためにellipseというキーワードを指定しましたが、ellipse,ではなくcircle,で指定することで円形(正円)のグラデーションにすることができます。
.gradient {
width: 40%;
height: 200px;
background: radial-gradient(
circle,
#d64fcd,
#60b6ef,
#89d37a,
#f9ed7d);
}
circleで円の形状を正円にした場合も、X軸とY軸の方向に%やpxで指定して中心位置を移動したり、キーワードのtop、right、bottom、leftで位置移動が可能です。
また中心位置の移動と共にサークルのサイズ調整もできます。
.gradient {
width: 40%;
height: 200px;
background: -webkit-radial-gradient(
30% 50%,
100px 100px,
#d64fcd,
#60b6ef,
#89d37a,
#f9ed7d);
}
上のCSSで30% 50%,の指定がグラデーションにする円の表示位置の記述で、その下に記述する100px 100px,の指定がサークルのサイズです。
またベンダープレフィックスを使わないと指定できなかったので-webkit-をつけてます。
このように指定したことで、たとえばサークルサイズを50px 100px,に指定し直すだけで、カラーをグラデーションにする要素サイズに合わせて正円ではなく縦の楕円にしたりできます。
意外とradial-gradientでグラデーションにする円のサイズと表示位置はX軸とY軸で指定してしまった方が簡単なのかもと思えました。
カラーストップで色の範囲を指定する
CSSでカラーをliner-gradientとradial-gradientを使用してグラデーションにするときに、指定する色にカラーストップをかけることで、色の範囲を指定することができます。
カラーストップは色の経由点と理解してもらえれば問題ないです。
今回、liner-gradient関数で線形グラデーション 、radial-gradient関数で円形グラデーションを指定出来るようにしてるので、線状と円形の2パターンの形状に分けて、カラーストップで色の範囲を指定してみます。
線形グラデーションカラーの範囲
カラーストップはカラーの値の後に半角スペースで区切って指定するもので、%やpxで始点と終点を指定して色の範囲をコントロールします。
カラーストップをかけたカラーの範囲が理解しやすかった方法で説明します。
まず下画像のようにlinear-gradientで4つのカラーを斜めにするだけにして、グラデーションしない状態を作ります。これもカラーストップでカラー範囲を指定して作ります。
.gradient {
width: 40%;
height: 200px;
background: linear-gradient(
15deg,
#d64fcd 0% 25%,
#60b6ef 25% 50%,
#89d37a 50% 75%,
#f9ed7d 75% 100%
);
}
カラーストップは、上のCSSのように4つのカラーの値指定の横に半角スペースを開けて%で始点と終点を記述します。
- 1番目のカラー(ピンク)に0%と25%
- 2番目のカラー(ブルー)に25%と50%
- 3番目のカラー(グリーン)に50%と75%
- 4番目のカラー(イエロー)に75%と100%
それぞれのカラーに対して一つ前のカラーの始点と同じ値を終点に指定してカラーストップすることで、グラデーションしないグラデーション？にできます。
このグラデーションしてない状態からカラーストップを調整して以下の画像のようなグラデーションをかける範囲を作ることができます。
.gradient {
width: 40%;
height: 200px;
background: linear-gradient(
15deg,
#d64fcd 0% 25%,
#60b6ef 35% 50%,
#89d37a 60% 75%,
#f9ed7d 80% 100%
);
}
変更したのはグラデーションにする4つのカラーの始点です。
上のCSSを例にするとグラデーションにするカラーのうちピンクが0%からスタートして25%でカラーストップ。
ブルーが35%からカラースタートして50%でカラーストップしてます。
先に指定してるカラー(ピンク)の終点と次のカラー(ブルー)の始点の値をずらすことで出来るカラースペースがグラデーションの範囲になるということですね。
円形グラデーションカラーの範囲
カラーストップで円型グラデーションの色の範囲を指定する場合も、カラーストップの指定はほとんど同じです。
.gradient {
width: 40%;
height: 200px;
background: -webkit-radial-gradient(
50% 50%,
130px 130px,
#d64fcd 0% 30%,
#60b6ef 30% 50%,
#89d37a 50% 70%,
#f9ed7d 70% 100%
);
}
先に指定したカラーの値の後に、そのカラーがスタートする位置とカラーストップする位置を%やpxで記述して、次に続くカラーの始点を先で指定してるカラーの終点の値と同じにすることでグラデーションしない円形にできます。
円形の場合はベンダープレフィックスが必要だったので-webkit-をつけています。
そして線形の色の範囲のときのようにカラーストップの位置を値でずらして円型のグラデーションにするわけですが、グラデーションにする正円の範囲を広げた中に文字でも入れてみようと思います。
<div class="gradient">gradation</div>.gradient {
text-align: center;
line-height: 200px;
font-size: 25px;
width: 50%;
height: 200px;
color: #fff;
font-weight: bold;
background: -webkit-radial-gradient(
50% 50%,
100px 100px,
#d64fcd 80%,
#60b6ef,
#89d37a,
#f9ed7d
);
}
円形にするカラー4色のうち中心位置に1番近いピンク色のカラーストップの値を80%までの範囲に広げて文字が収まるようにしました。
そして残りの3カラーは、中心から八方に放射状のグラデーションが申し訳なさを感じるような細っそい範囲でグラデーションがかかります。
