모든 색상 도구

거의 2,000가지 디자인으로 끊김 없는 SVG 배경 패턴을 만드세요. 색상, 확대, 간격, 각도를 바꾼 뒤 CSS를 복사하거나 SVG, PNG, WebP를 다운로드할 수 있습니다.

무료

1패턴 선택

여기에 제목이 들어갑니다

실제 콘텐츠 뒤에 패턴이 어떻게 보이는지 확인해 보세요.

시작하기
패턴

컬렉션별로 둘러보기


패턴 생성기 소개

패턴 생성기는 거의 2,000가지에 이르는 기성 디자인을 바로 조정해서 쓸 수 있는 배경으로 바꿔 줍니다. 물결, 물방울무늬, 테셀레이션부터 타탄, 일본의 세이가이하, 이슬람 별, 아르데코 부채, 픽셀 스프라이트, 위장 무늬까지 14개 컬렉션을 둘러보고, 각 디자인을 원하는 색상으로 확인해 보세요.

모든 디자인은 벡터 아트로 그려져 있어 어떤 확대 비율과 각도에서도 이음새가 보이지 않게 반복됩니다. 최대 6가지 색상, 확대, 위치, 간격, 선 두께, 각도를 바꿀 수 있고, 채워진 도형을 윤곽선으로 바꾸거나 반복 애니메이션으로 패턴을 움직이게 할 수도 있습니다. 지형도, 보로노이 셀, 트뤼셰 타일 같은 제너레이티브 패턴은 클릭할 때마다 새로운 변형을 만들 수 있습니다.

마음에 들면 CSS, SCSS, Tailwind 설정, 인라인 SVG, 데이터 URI, React 컴포넌트로 복사하거나, 최대 8000픽셀까지 원하는 크기의 SVG, PNG, JPG, WebP로 다운로드하세요. 직접 반복 패턴을 만들 수 있는 타일 하나만 내보내는 것도 가능합니다. 모든 작업은 브라우저에서 처리되므로 아무것도 업로드되지 않으며 계정도 필요하지 않습니다.

패턴 생성기 사용 방법

  1. 패턴 선택: 이름으로 검색하거나 컬렉션과 색상 수로 필터링하세요.
  2. 색상 선택기, 기성 팔레트 또는 “새 팔레트”로 색상을 고르세요.
  3. 확대, 위치, 간격, 선 두께, 각도를 조정하세요. “영감 받기”를 누르기 전에 유지하고 싶은 값은 잠가 두세요.
  4. “타일 보기”, “페이지에서”, “텍스트에서” 미리보기로 확인하세요.
  5. 코드를 복사하거나 파일을 다운로드하고, “링크 복사”를 사용하면 나중에 이 패턴으로 그대로 돌아올 수 있습니다.

자주 묻는 질문

네. 이 도구는 가입 없이 제한 없이 무료로 사용할 수 있으며, 모든 패턴이 브라우저에서 그려지므로 어떤 파일도 서버로 전송되지 않습니다.

네. 내보낸 패턴은 웹사이트, 앱, 패키지, 인쇄물 등 개인 작업과 상업 작업 모두에 출처 표기 없이 사용할 수 있습니다.

아니요. 타일 가장자리를 넘어가는 모든 도형은 반대편에도 다시 그려지므로 끊김 없이 반복됩니다. “타일 보기” 미리보기에서 타일이 시작하고 끝나는 위치를 정확히 확인할 수 있습니다.

가장 간단한 것은 CSS입니다. 규칙을 스타일시트에 붙여 넣고 원하는 요소에 적용하면 됩니다. 0, 90, 180, 270도에서는 background-size와 함께 작은 타일 하나를 사용하고, 그 밖의 각도에서는 요소를 가득 채우는 SVG를 사용합니다. Tailwind, SCSS, React, 데이터 URI 버전에도 같은 패턴이 담겨 있습니다.

애니메이션은 SVG에 내장되어 있어 스크립트가 필요 없고, 최신 브라우저에서는 CSS 배경으로도 작동합니다. 지원해야 하는 브라우저에서 확인해 보세요. PNG, JPG, WebP 파일은 정지 이미지이므로 첫 번째 프레임만 유지됩니다.

위장 무늬나 지형도 같은 유기적인 디자인에는 곡선이 많이 들어 있습니다. 코드 크기는 복사 버튼 옆에 표시됩니다. 페이지에 너무 무겁다면 타일이 더 작은 디자인을 고르거나 대신 PNG 타일을 사용하세요.

네, 거의 모든 패턴에서 가능합니다. “투명 배경”을 켜고 CSS, SVG, PNG, WebP로 내보내세요. 일부 겹치는 디자인은 배경색으로 도형을 가리므로 단색 배경이 필요합니다. JPG 파일은 투명도를 지원하지 않습니다.


인기 검색어
svg 패턴 생성기 심리스 패턴 만들기 css 배경 패턴 반복 패턴 만들기 무료 배경 패턴 기하학 패턴 생성기 tailwind 배경 패턴 끊김 없는 타일 png
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.
문제 신고

이 무료 도구를 귀하의 웹사이트에 추가하세요: 아래 코드를 복사하여 붙여넣으세요.