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

以前は画像を切り出して表示していたグラデーションも、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;
}

背景を複数指定し（,で区切る）、背景を背景サイズの半分縦横にずらすことで、斜め掛けのドットも作成できる。

円グラフ

線状・円状グラデーション同様、色経由点の色を同じにすることで境界線がくっきりするので、扇形（円錐形）グラデーションを利用して円グラフを描画することが可能。

格子柄

扇形（円錐形）グラデーションの繰り返しrepeating-conic-gradient で格子柄描画ができる。

参考ページ

• CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN
• repeating-linear-gradient() - CSS: Cascading Style Sheets | MDN
• linear-gradient()－CSS3 リファレンス
• radial-gradient()－CSS3 リファレンス
• CSS で円錐形グラデーションが描けるって知ってた？ 便利な活用アイデアも紹介 – WPJ