CSSで作れる効果いろいろ（グラデーション編）

2022年05月26日

Ad Area

以前は画像を切り出して表示していたグラデーションも、cssで簡単に表現できるようになった。グラデーションは、使いようによってはストライプのような柄も表現することができる。

グラデーションの種類

線形グラデーション

// 基本の記法
selecter {
  background: linear-gradient(to bottom, #3051AE 0%, #FFCC92 100%);
}

// 省略形
selecter {
  background: linear-gradient(#3051AE, #FFCC92);
}

グラデーションの方向（もしくは角度） - 色経由点の順で記述する。色経由点は最低2つ必要。

左から右のグラデーションはto rightまたは 90deg 、左上から右下への対角はto bottom right または 135deg となる。

上から下方向（to bottom もしくは 180deg）色経由点の最初（ 0% ）と最後（ 100% ）はデフォルト値なので省略可能。

.gradient02 {
  background: linear-gradient(135deg, #ff62b7, #ffb280 10%, #fffb75 40%, #85ff8d 60%, #80b1ff 90%, #bd7ed9);
}

色経由点を指定せずに複数色を設定した場合、等間隔のグラデーションになる。色経由点は%で制御できる。

反復線形グラデーション

.gradient03 {
    background: repeating-linear-gradient(#ff62b7, transparent 50px);
}

repeating-linear-gradientは、反復する線形グラデーションを表す。方向または角度、開始色、終了色、グラデーションの幅を指定する。デフォルト値は線形グラデーションと同じ。

上の例の場合は、上から下方向（デフォルト値で省略可）、#ff62b7から透明色に50px幅のグラデーションになる。

円形グラデーション

.gradient04 {
    background: radial-gradient(circle at 50% 50%, transparent 0%, #ADC9FA 15%, #3778A9 90%);
}

形状：初期値ellips（楕円）
グラデーションの中心位置：at に続けて指定、初期値 center（中央）
グラデーションのサイズ：初期値 farthest-corner（ボックスの一番遠い角がグラデーション終了の位置）
開始色・中継色・終了色を指定

扇形（円錐形）グラデーション

.gradient05 {
    background: conic-gradient(#ff62b7, #ffb280, #fffb75, #85ff8d, #80b1ff, #bd7ed9, #ff62b7);
}

中央の点から放射状に描かれるグラデーションになる。

from ＋角度指定で時計回りグラデーションの位置を指定。初期値0
background-position グラデーション中心位置を指定。初期値center

グラデーションの応用

マーカー

上から下へのグラデーションを透明色（transparent）と任意の色の2色で構成すると、マーカーの効果が作れる。2色の色経由点を同じにすることによって、「色の境目がくっきりしたグラデーション」になる。

色経由点の位置によって、マーカーの太さが変わる。

/* 文字部分すべて塗りつぶし */
.marker01 {
    background: linear-gradient(transparent 0%, #b2ffb2 0%);
}

色経由点0%にすると文字部分がすべて塗りつぶされる。<mark>でのマークアップ（デフォルトの背景色 #FFFF00）や、<span>タグにbackground-colorで色指定する場合と同じなので、わざわざ線形グラデーションを使う必要がない。

/* マーカーの太さに応じて色経由点を調整 */
.marker02 {
    background: linear-gradient(transparent 30%, #c1e0ff 30%);
}
.marker03 {
    background: linear-gradient(transparent 50%, #c1e0ff 50%);
}
.marker04 {
    background: linear-gradient(transparent 70%, #c1e0ff 70%);
}
.marker05 {
    background: linear-gradient(transparent 80%, #c1e0ff 80%);
}

色経由点の%が小さいほど太い線に、大きいほど細い線になる。

.marker06 {
    background: linear-gradient(transparent 30%, #c1e0ff 100%);
}

透明色の色経由点を100%以外（0%～70%あたり）に、2色目の色経由点を100%にすると、透明色と2色目とのグラデーションになるのでにじんだような蛍光ペンの線になる。

.marker07 {
    background: linear-gradient(transparent 30%, #ffffb7 30%, #b2ffb2 100%);
}

3色目を追加して混色のマーカーも作れる。

ストライプ柄（上下・左右方向）

.stripe {
    background-color: #FFD3FA;
    background-image: linear-gradient(90deg, transparent 50%, #D601FF 50% );
    background-size: 20px 20px;
}

背景色を設定
background-image のグラデーションを、透明色と任意の2色の色経由点が同じになるよう設定すると縞模様になる。上下方向は0deg、左右方向は90deg、
背景のサイズを設定
背景画像を縦横繰り返し表示：background-repeat: repeat;（初期値なので省略）

背景と線を等幅にする場合は50%、線を細くする場合は50%より大きい値にする。
%の代わりにpxでも指定可能。

ストライプ柄（斜め左上・右上方向）

.stripe {
  background-color: #FFD3FA;
  background-image:
     repeating-linear-gradient(135deg, tramsparent, transparent 10px, #D601FF 10px, #D601FF 20px);
}

上下・左右方向のように繰り返し背景で表示できないので、線形グラデーションの繰り返し repeating-linear-gradient を使う。始点から10pxまでを透明色、10pxから終点までを線色に指定。

破線

borderのdash dottedでは表現しきれないスタイルもlinear-gradientの応用で表現することができる。

.linear-dot {
    background-size: 10px 1px;
    background-image: linear-gradient(to right, #000, #000 5px, transparent 5px, transparent 10px);
    background-repeat: repeat-x;
    background-position: 0 100%;
}

CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDNの「不連続線の生成」を利用して、ストライプを作ることができる。

背景サイズを幅10px高さ1pxに指定
始点から5pxまでを黒、5pxから10pxまでを透明背景にする。
背景を横方向に繰り返し
y方向100%の位置に配置

ドット柄

.dot1 {
    background-color: #FBFDFD;
    background-image: radial-gradient(#3A3F58 1px, transparent 1px);
    background-size: 12px 12px;
}

円形グラデーションを使う。

形状とサイズ：後にで背景のサイズ background-size を縦横同サイズで指定するので、初期値 ellipse at center でOK＆省略。
始点から1pxまでの色（#3A3F58）と1px以降の色（transparent）を指定。線状ストライプ同様、色経由点を同じにすることで、くっきりした境界線になる。円形の末端の色も1px以降と同じ色なので省略可。
背景画像を縦横繰り返し表示：background-repeat: repeat;（初期値なので省略）

.dot2 {
    background-color: #FBFDFD;
    background-image: radial-gradient(#3A3F58 30%, transparent 30%);
    background-size: 30px 30px;
}

グラデーションのサイズは%でも指定可。

.dot3 {
    background-color: #FBFDFD;
    background-image: radial-gradient(#3A3F58 1px, transparent 1px),radial-gradient(#3A3F58 1px, transparent 1px);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}