블롭 메이커

블롭 가이드

블롭은 불규칙하지만 매끄러운 가장자리를 가진 부드러운 유기적 도형으로, 2020년 이후 수많은 히어로 배경, 아바타, 섹션 장식 뒤에 있는 디자인 트렌드입니다. 고전적인 CSS 기법은 8값 border-radius로 평범한 직사각형을 유기적 형태로 구부립니다.

랜덤 생성을 눌러 새 모양을 만들고, 곡률 슬라이더로 가장자리를 더 둥글거나 독특하게, 색상을 고르세요. border-radius 코드를 CSS에 바로 복사 — 이미지도 SVG 파일도 필요 없고 완전 반응형입니다.

Pro Tips

• 블롭은 큰 크기와 부드러운 그라데이션에서 가장 아름답습니다. 장식 배경으로 쓰며 미묘한 애니메이션을 더하면 더 세련됩니다: @keyframes morph { 50% { border-radius: 다른 값; } }.
• 텍스트 뒤에 낮은 투명도의 블롭을 놓아 깊이를 만드세요. 크고 천천히 떠다니는 블롭 몇 개면 콘텐츠를 방해하지 않는 현대적 히어로 배경이 됩니다.