유기적인 CSS 얼룩 모양 생성기
CSS 테두리 반경을 시각적으로 디자인합니다. px 또는 퍼센트 단위의 4개의 독립적인 모서리 슬라이더, 인스턴트 원 및 알약을 위한 모든 모서리 연결 바로가기, 무작위 모양의 유기적 블롭 모드를 제공합니다.
처리 중...
0%
결과
이 페이지는 이미 로드된 유기적 모양을 사용하여 blob 모드에서 직접 테두리 반경 생성기를 엽니다. 정사각형 모서리도 없고 완벽한 원도 없으며 CSS만으로 작성된 부드럽고 불규칙한 윤곽선만 있습니다. 새로운 변형을 원하시면 언제든지 Randomize를 누르세요.
모든 CSS blob의 비결은 8개 값 슬래시 구문입니다. border-radius는 슬래시로 구분된 4%의 두 세트를 허용합니다. 첫 번째 세트는 수평 반경을 휘게 하고 두 번째 세트는 수직 반경을 곡선으로 만듭니다. 두 세트가 일치하지 않는 것은 정확히 둥근 둥근 직사각형의 대칭을 유기적인 윤곽선으로 깨뜨리는 것입니다.
이와 같은 얼룩은 라이브러리나 SVG 내보내기가 필요하지 않기 때문에 수많은 현대 랜딩 페이지의 히어로 이미지, 아바타 및 일러스트레이션 뒤의 빈 공간을 채웁니다. 이는 CSS 4줄입니다. 현재 모양을 복사하거나 레이아웃에 적합하다고 느껴질 때까지 계속 무작위로 추출합니다.