CSS 패턴 배경 생성기

대부분의 '패턴 생성기' 도구는 모든 옵션에 동일한 repeating-linear-gradient 공식을 조용히 재사용하고 숫자만 바꿉니다. 이 도구는 그렇지 않습니다. 여기에 있는 여섯 가지 패턴 유형 각각은 실제로 그 모양을 생성하는 특정 CSS 기법으로 제작됩니다. 스트라이프는 두 개의 색상 띠가 있는 단일 repeating-linear-gradient를 사용합니다. 점은 깔끔하게 직사각형 그리드에 원형 점을 타일링할 수 없는 repeating-radial-gradient 대신, background-size만으로 순수하게 타일링되는 하나의 radial-gradient를 사용합니다. 이는 CSS 점 패턴의 클래식한 기법입니다. 체커보드는 실제 4사분면 conic-gradient 공식을 사용합니다. 정사각형 타일 중앙에 위치한 원뿔형 그레이디언트가 90도 경계에서 자연스럽게 네 개의 사분면 정사각형으로 분할되며, 이 사분면들에 두 색상을 번갈아 적용하면 근사치가 아닌 진짜 체커보드로 타일링됩니다.

격자무늬와 대각선 크로스해치는 두 번째 방향을 테두리 트릭으로 모방하지 않고, 두 개의 repeating-linear-gradient를 별개의 background-image 항목으로 레이어드합니다. 격자무늬는 선명한 수평 및 수직 규칙선을 위해 '오른쪽으로'와 '아래쪽으로' 반복 그레이디언트를 결합합니다. 크로스해치는 +45도 및 -45도 반복 그레이디언트를 레이어드하여 바구니 짜기 스타일의 대각선 직조를 만듭니다. 정확히 말하자면, 이것은 정직한 크로스해치이며 진정한 헤링본 기하 구조는 아닙니다. 도구에서는 과장하지 않고 그렇게 표기합니다. 삼각형은 체커보드의 네 쐐기 conic-gradient 기법을 재사용하되 그레이디언트를 45도 회전하여 시작합니다. 이렇게 하면 쐐기 경계가 타일 모서리의 중간점에서 모서리 자체로 이동하고, 동일한 네 쐐기가 네 개의 사분면 정사각형 대신 네 개의 대각선 방향 삼각형으로 변환됩니다.

모든 패턴 유형은 실제로 적용 가능한 컨트롤만 노출합니다. 각도 슬라이더는 스트라이프에서, 점 반경과 간격은 점에서, 선 두께는 격자무늬와 크로스해치에서 나타납니다. 큰 타일 미리보기 상자는 모든 변경 사항에 반응하여 다시 그려지므로, 값을 확정하기 전에 여러 번의 완전한 반복을 볼 수 있습니다. 출력 모드를 SVG로 전환하면 동일한 패턴이 일반 rect, circle, path 또는 polygon 기본 요소로 구성된 <pattern> 요소로 다시 나타나며, <defs> 안에 붙여넣을 수 있게 준비됩니다. 독립형 .svg 파일을 위한 원클릭 다운로드도 제공됩니다.

모든 작업이 로컬 브라우저에서 실행됩니다. 이미지 업로드, 서버 왕복, 계정이 전혀 필요 없습니다. 반복 없는 단색 또는 그레이디언트 채우기가 필요하다면 이 사이트의 CSS 그레이디언트 생성기가 올바른 도구입니다. 이 도구는 이미지 에셋을 전혀 사용하지 않고 타일링 가능한 기하학적 배경을 만드는 데 특화되어 있습니다.