JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="css-selector">
  
</div>

<div class="css-selector type01">
  
</div>

CSS

.css-selector {
  width: 300px;
  height: 300px;
  margin: 20px;
  border-radius: 50%;
  
    background: linear-gradient(270deg, #16f7bd, #796bee, #ec379d);
    background-size: 300% 300%;
    animation: AnimationName 10s ease-out infinite;
}
.css-selector.type01 {
  filter: blur(15px);
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}