Satu seni kecerunan warna

  Animasi CSS

Demo

HTML view ▼

<div class="labu">
<div id="bks">
    <div id="kcerunan1"> </div>
    <div id="kcerunan2"> </div>
</div>
</div>
<style>
  #kcerunan1 {
    background: linear-gradient(70deg, rgb(10, 3, 15) 0%, rgb(64, 69, 149) 25%, rgb(10, 3, 15) 50%, rgb(64, 69, 149) 75%, rgb(10, 3, 15) 100%);
    z-index: 0;
    animation: grak 4s linear infinite;
    background-size: 300% 200%;
}
@keyframes grak {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 33%; }
}
  #kcerunan2 {
    background: radial-gradient(circle, rgb(0, 0, 0) 0%, rgb(207, 204, 205) 55%, rgb(70, 9, 144) 100%);
    mix-blend-mode: color-dodge;
}
.labu * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 12px;
}
.labu {
    display: grid;
    place-items: center;
    width: 100%;
}
.labu div {
    grid-column: 1;
    grid-row: 1;
}
#bks {
    height: 100vmin;
    width: 100%;
    display: grid;
}
</style>

Tutup