sliding background effect-2

by Richard Hunter

HTML

<div class="container">
  <div class="box box-1"></div>
</div>

CSS

.container {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  border: solid 1px red;
  margin: 5px;
  transition: all .4s ease;
  background-color: lightgoldenrodyellow;
}

.box-1 {
  --width: 1;
  --height: 1;
  --angle: 63.435deg;
  --gradient: 0.5;
  --background-height: 300%;
  --background-width: 150%;
  background-image: linear-gradient(var(--angle), crimson 50%, lightgoldenrodyellow 50%);
  background-position: 0% -50%;
  background-size: var(--background-width) var(--background-height);
  background-repeat: no-repeat;
}

.box-1:hover {
  background-position: 0% 100%;
}