간단한 css gradient shadow animation

css gradiend animation은 여러군데 활용 할수 있을듯.

 

 

See the Pen css gradient animation by publisher.kim (@publisherkim) on CodePen.

 

css

@keyframes color {
  0%,to {background-position: 10% 0;}
  50% {background-position: 91% 0;}
}

.box{margin:20px auto 0; width:300px; height:300px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; position:relative; border-radius:20px;}
.box::before{content: ''; display:block; width:100%; height:100%; position: absolute;left: 0; top: 0; filter: blur(17px); z-index: -1; animation: color 6s infinite linear;background: linear-gradient(130deg,#ff7e00,#00f,#5cff00,#ffeda0);background-size: 200% 200%; border-radius:20px}