디자인 아틀라스원 몇 개를 filter: blur(60px 이상)로 크게 뭉개고, 각자 다른 주기로 움직이게 하면 됩니다. 주기를 서로소(예: 11초, 17초, 23초)로 두면 패턴이 반복돼 보이지 않습니다.
오로라 그라데이션
Aurora gradient
크게 흐린 색 덩어리 여러 개가 천천히 움직이며 섞이는 배경. 랜딩 페이지 히어로에서 자주 봅니다.
다른 이름: Animated blur gradientGradient blobs
···
<div class="aurora"><i></i><i></i><i></i><i></i></div><h1>Aurora</h1>.aurora{position:absolute;inset:-20%;filter:blur(60px) saturate(1.3)}
.aurora i{position:absolute;width:55%;height:55%;border-radius:50%;opacity:.8;mix-blend-mode:screen}
.aurora i:nth-child(1){background:#22d3ee;left:5%;top:10%;animation:m1 11s ease-in-out infinite alternate}
.aurora i:nth-child(2){background:#a855f7;right:0;top:0;animation:m2 17s ease-in-out infinite alternate}
.aurora i:nth-child(3){background:#34d399;left:25%;bottom:0;animation:m3 23s ease-in-out infinite alternate}
.aurora i:nth-child(4){background:#f472b6;right:10%;bottom:10%;animation:m1 19s ease-in-out infinite alternate-reverse}
@keyframes m1{to{transform:translate(30%,20%) scale(1.2)}}
@keyframes m2{to{transform:translate(-35%,25%) scale(.8)}}
@keyframes m3{to{transform:translate(20%,-30%) scale(1.1)}}
h1{position:relative;color:#fff;font-size:56px;letter-spacing:-.03em;margin:0}