[CSS] グラデーション

基本のグラデーション

.simple-linear {
  background: linear-gradient(orange, pink);
}

横にグラデーション

.horizontal-gradient{
  background: linear-gradient(to right , orange, pink);
}

ななめにグラデーション

.diagonal-gradient{
  background: linear-gradient(to right bottom , orange, pink);
}

角度でグラデーション

.angled-gradient{
  background: linear-gradient(30deg , orange, pink);
}

境界線

.border-gradient{
  background: linear-gradient(to right bottom , orange 50%, pink 50%);
}

罫線

.note-gradient{
  border:1px solid black;
  background-color:white;
  background: linear-gradient(#ccc 1px, transparent 1px);
  background-size : 100% 2.5em;
  padding-bottom: 1px;
}