CSS 패턴 생성기
순수 CSS 기하학 배경 패턴을 만드세요 — 도트·격자·줄무늬·체커보드·지그재그. 간격·무늬 크기·회전·패턴 투명도까지 조절하고 실시간 미리보기로 확인하세요. 100% 브라우저 처리, 업로드 없음.
셀 크기는 간격을, 무늬 크기는 그 안에 그려지는 잉크를 정합니다. 넓은 셀에 작은 도트를 두면 성기게 퍼진 패턴이 됩니다. 체커보드와 지그재그는 셀을 가득 채우므로 무늬 크기가 따로 없습니다.
실시간 미리보기
background-color: #eef2ff; background-image: radial-gradient(circle, #4f46e5 5px, transparent 6px); background-size: 24px 24px;
파일로 내보내기
🔒 브라우저에서 실행되며 업로드되지 않습니다.
셀 크기는 간격, 무늬 크기는 잉크
도트·격자·줄무늬·체커보드·지그재그 중에서 패턴을 고르고, 패턴 색과 배경 색을 고른 다음 패턴이 반복되는 셀 크기, 그 안에 그려지는 무늬 크기, 회전, 패턴 투명도를 정하고 완결된 CSS 블록을 복사하세요. 셀 크기는 간격이고 무늬 크기는 잉크라서, 넓은 셀에 작은 도트를 두면 무늬가 커지는 대신 성기게 퍼집니다. 체커보드와 지그재그는 셀을 가득 채우므로 무늬 크기가 따로 없습니다. 모든 컨트롤을 바꿀 때마다 미리보기가 즉시 갱신되어 원하는 배경을 정확히 맞춘 뒤 복사할 수 있습니다.
순수 CSS, 이미지 없음
모든 패턴은 단일 요소 위에 반복 선형·방사형 그라디언트로 그려집니다. 이미지·SVG·자바스크립트가 없어 어떤 크기에서도 선명하게 확대되고, 즉시 로드되며 오프라인에서도 동작합니다. 선언을 원하는 선택자에 붙여넣기만 하면 됩니다. 배경만은 스스로 회전할 수 없어, 패턴을 회전하면 타일링을 회전된 ::before 레이어에 올린 짧은 규칙 두 개가 출력됩니다. 두 규칙을 모두 붙여넣고 요소에 pattern 클래스를 주세요.
자주 묻는 질문
생성된 CSS는 어떻게 사용하나요?
블록을 복사해 section이나 div 같은 원하는 CSS 규칙에 붙여넣으세요. background-color·background-image·background-size 선언이 포함되어 있어 해당 선택자를 적용한 곳에 패턴이 렌더링됩니다. 회전을 주면 대신 .pattern 클래스 규칙 두 개가 출력되니, 두 규칙을 모두 붙여넣고 요소에 그 클래스를 주세요.
회전은 모든 패턴에 적용되나요?
네. 줄무늬는 각도를 자기 그래디언트 안에 담고, 도트·격자·체커보드·지그재그는 배경 이미지 자체가 회전하지 못하므로 타일링을 회전된 ::before 레이어로 옮긴 규칙 두 개를 출력합니다. 요소 안의 내용은 그대로 똑바로 놓입니다.
무늬를 키우지 않고 성기게 퍼뜨리려면?
셀 크기를 키우고 무늬 크기를 줄이세요. 셀 크기는 패턴이 반복되는 간격이고 무늬 크기는 그 안에 그려지는 잉크라서, 60px 셀에서도 6px 도트는 그대로 6px입니다. 체커보드와 지그재그는 셀을 가득 채우므로 무늬 크기가 따로 없습니다. 패턴 투명도는 잉크를 배경색 위로 흐리게 합니다.
정말 순수 CSS만으로 만든 패턴인가요?
네. 모든 패턴을 요소 하나 위의 반복 선형·방사형 그래디언트만으로 만듭니다. 이미지도 SVG도 자바스크립트도 쓰지 않아 용량이 거의 없고, 무한히 이어 붙일 수 있으며 해상도에 영향받지 않습니다.