하나의 도형이 물방울처럼 꿀렁이며 계속 다른 유기적인 모양으로 부드럽게 바뀌는 효과.
디자인 아틀라스<div class="blob"></div>.blob{width:min(220px,72%);aspect-ratio:1;
background:linear-gradient(135deg,var(--accent),var(--accent-2));
box-shadow:0 24px 50px color-mix(in srgb,var(--accent) 30%,transparent);
animation:morph 8s ease-in-out infinite}
@keyframes morph{
0%,100%{border-radius:42% 58% 70% 30% / 45% 45% 55% 55%}
25%{border-radius:58% 42% 35% 65% / 60% 35% 65% 40%}
50%{border-radius:50% 50% 33% 67% / 55% 27% 73% 45%}
75%{border-radius:33% 67% 58% 42% / 63% 68% 32% 37%}}border-radius는 슬래시(/)를 기준으로 앞쪽에 가로 반경, 뒤쪽에 세로 반경을 네 모서리마다 따로 줄 수 있습니다(예: 42% 58% 70% 30% / 45% 45% 55% 55%). 이 여덟 개 숫자의 조합만으로 사각형이 원, 물방울, 구름 같은 다양한 유기적 형태로 보입니다.
이 값을 서로 다른 키프레임 사이로 애니메이션하면 도형이 끊임없이 다른 모양으로 변형되며 살아있는 듯한 인상을 줍니다. 인접한 키프레임끼리 곡률 차이를 너무 크게 벌리면 중간 과정이 뚝뚝 끊겨 보이니, 값들을 조금씩만 바꿔가며 여러 단계를 거치는 편이 매끄럽습니다.
여러 도형이 서로 가까워지며 하나로 합쳐지는 구이 이펙트와 달리, 모핑 블롭은 도형 하나가 스스로 계속 형태를 바꿀 뿐 다른 도형과 합쳐지지는 않습니다.
히어로 배경의 장식용 도형, 빈 상태(empty state) 일러스트 배경에 씁니다. 텍스트 뒤에 둘 때는 blur를 더해 시선을 방해하지 않게 하세요.