線形グラデーション

.linear-1 {
  /* orangeからblueにグラデする。orange 0%, blur 100% と同じ挙動 */
  background: linear-gradient(orange, blue);
}
.linear-2 {
  /* 左から右にグラデする。to right = 90deg or 0.25turn と同じ挙動 */
  background: linear-gradient(to right, orange, blue);
}
.linear-3 {
  /* 45度回転した状態でグラデする。45deg = to right top or 0.125turn と同じ挙動 */
  background: linear-gradient(45deg, orange, blue);
}
.linear-4 {
  /* グラデ軸の開始点を10%, 終了点を50%にする。 */
  background: linear-gradient(orange 10%, blue 50%);
}
.linear-5 {
  /* 複数グラデ&各色の開始を指定 */
  background: linear-gradient(orange 10%, blue 50%, deeppink 100%);
}
.linear-6 {
  /* グラデ軸の開始と終了点が同じのため変化が急になる。指定数値が昇順じゃない場合も開始＞終了となるので変化が急になる */
  background: linear-gradient(orange 30%, blue 30%);
}
.linear-7 {
  /* 変化の中心点を30%にする */
  background: linear-gradient(orange 0%, 30%, blue 100%);
}
.linear-8 {
  /* 左下に向かって複数グラデ */
  background: linear-gradient(to bottom right, orange 0% 20%, blue 20% 40%, deeppink 40% 60%, lime 60% 80%, yellow 80% 100%);
}
.linear-9 {
  /* 複数レイヤー(?)でのグラデ。透過箇所がない場合は最初に指定した色が表示される */
  background: linear-gradient(orange, transparent, transparent),
              linear-gradient(transparent, blue, transparent),
              linear-gradient(transparent, transparent, deeppink);
}
.linear-10 {
  /* 背景画像に対してのグラデ */
  background: linear-gradient(transparent, orange), url("https://i.imgur.com/djkvTYX.png") center no-repeat;
  background-size: contain;
}

放射グラデーション

.radial-1 {
  /* デフォルトはellipse（楕円） */
  background: radial-gradient(deeppink, lime);
}
.radial-2 {
  /* 正円 */
  background: radial-gradient(circle, deeppink, lime);
}
.radial-3 {
  /* 左始点で正円のグラデ */
  background: radial-gradient(circle at left, deeppink, lime);
}
.radial-4 {
  /* 末端がボックスの中心から一番近い辺に隣接するように描画される */
  background: radial-gradient(circle closest-side, deeppink, lime);
}
.radial-5 {
  /* 末端がボックスの中心から一番遠い辺に隣接するように描画される */
  background: radial-gradient(circle farthest-side, deeppink, lime);
}
.radial-6 {
  /* 末端がボックスの近い頂点（角）に隣接するように描画される */
  background: radial-gradient(circle closest-corner at 20px, deeppink, lime);
}
.radial-7 {
  /* 初期値。末端がボックスの中心から最も遠い頂点（角）に接する */
  background: radial-gradient(circle farthest-corner at 20px, deeppink, lime);
}
.radial-8 {
  /* 正円の大きさを指定 */
  background: radial-gradient(circle 50px, deeppink, lime);
}
.radial-9 {
  /* 楕円の大きさを指定 */
  background: radial-gradient(ellipse 10px 50px, deeppink, lime);
}
.radial-10 {
  /* 複数グラデ */
  background: radial-gradient(ellipse, deeppink, lime, yellow, darkviolet);
}
.radial-11 {
  /* グラデ変化なし正円 */
  background: radial-gradient(circle, deeppink 0% 10%, lime 10% 20%, yellow 20% 30%, darkviolet 30% 40%, transparent 40%);
}
.radial-12 {
  /* xy軸20px起点の正円グラデ */
  background: radial-gradient(circle at 20px 20px, deeppink, lime);
}
.radial-13 {
  /* 複数レイヤーのグラデ */
  background: radial-gradient(circle at 0px 0px, deeppink 40%, transparent 0%),
              radial-gradient(circle at 100px 200px, lime 40%, transparent 0%);
  background-color: white;
}

扇形グラデーション

.conic-1 {
  /* yellowからdarkvioletに変化する扇型のグラデ */
  background: conic-gradient(yellow, darkviolet);
}
.conic-2 {
  /* x, y軸の指定 */
  background: conic-gradient(at 0% 40%, yellow, darkviolet);
}
.conic-3 {
  /* 複数グラデ */
  background: conic-gradient(yellow, darkviolet, orange, blue);
}
.conic-4 {
  /* 起点・終点を指定した複数グラデ */
  background: conic-gradient(yellow 0% 20%, darkviolet 20% 40%, orange 40% 60%, blue 60% 80%, deeppink 80% 100%);
}
.conic-5 {
  /* 90度回転を起点としたグラデ*/
  background: conic-gradient(from 90deg, yellow, darkviolet);
}

反復グラデーション

.repeating-1 {
  /* 4分割のグラデ */
  background: repeating-linear-gradient(crimson, deepskyblue 25%);
}
.repeating-2 {
  /* 90回転して変化が急なグラデ */
  background: repeating-linear-gradient(90deg, crimson 0% 10%, deepskyblue 10% 20%);
}
.repeating-3 {
  /* 複数レイヤー */
  background: repeating-linear-gradient(crimson 0% 10%, transparent 10% 20%),
              repeating-linear-gradient(90deg, deepskyblue 0% 10%, transparent 10% 20%);
}
.repeating-4 {
  /* 開始・終了が同じ色で終わる */
  background: repeating-linear-gradient(crimson 0% 5%, transparent 5% 20%, crimson 20% 25%),
              repeating-linear-gradient(90deg, deepskyblue 0% 5%, transparent 5% 20%, deepskyblue 20% 25%);
}
.repeating-5 {
  /* 4に続くグラデ */
  background: repeating-linear-gradient(crimson 0% 5%, transparent 5% 20%, crimson 20% 25%),
              repeating-linear-gradient(90deg, deepskyblue 0% 5%, transparent 5% 20%, deepskyblue 20% 25%);
}
.repeating-6 {
  /* 放射グラデ */
  background: repeating-radial-gradient(crimson 0% 10%, deepskyblue 10% 20%);
}
.repeating-7 {
  /* アニメーション付き放射グラデ */
  background: repeating-radial-gradient(deepskyblue 0% 10%, crimson 10% 20%);
  animation: 0.3s linear 0s infinite normal moving;
}
@keyframes moving {
  from {
    background: repeating-radial-gradient(crimson 0% 10%, deepskyblue 10% 20%);
  }
  to {
    background: repeating-radial-gradient(deepskyblue 0% 10%, crimson 10% 20%);
  }
}
.repeating-8 {
  /* 扇形グラデの反復 */
  background: repeating-conic-gradient(deepskyblue 0deg 20deg, crimson 20deg 40deg);
}

CodePen

線形グラデーション

See the Pen Untitled by m1y474 (@m1y474) on CodePen.

放射グラデーション

See the Pen radial-gradient by m1y474 (@m1y474) on CodePen.

扇形グラデーション

See the Pen conic-gradient by m1y474 (@m1y474) on CodePen.

反復グラデーション

See the Pen repeating-gradient by m1y474 (@m1y474) on CodePen.

感想

スプラ4は赤×水色の配色が来ると思います！

参考

developer.mozilla.org

ics.media

株式会社エイルシステムではWebエンジニア・モバイルアプリエンジニアを募集しています。
実務経験がなくてもOKです。ご興味のある方は弊社HPよりご連絡ください。

index.php

【CSS】線形・放射・扇形・反復グラデーションまとめ

線形グラデーション

放射グラデーション

扇形グラデーション

反復グラデーション

CodePen

線形グラデーション

放射グラデーション

扇形グラデーション

反復グラデーション

感想

参考