Design AtlasBlur a few circles heavily (60px+) and move each on its own cycle. Use coprime durations (say 11s, 17s, 23s) so the pattern never visibly repeats.
Aurora gradient
오로라 그라데이션
Several heavily blurred colour blobs drifting and mixing slowly. A common landing-page hero background.
Also known as: 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}