소개

CSS 패턴 생성기는 순수 CSS 그라디언트로 반복되는 배경 디자인 — 줄무늬, 점, 격자, 체크 등 — 을 이미지 파일 없이 만듭니다. 패턴이 코드라서 어떤 크기에서도 선명하고, 파일 용량이 극히 작으며, 색을 바꾸기 쉽습니다. 이 도구는 패턴을 시각적으로 조정하고 정확한 CSS를 복사해 줘, 몇 초 만에 깔끔한 배경을 넣을 수 있습니다.

사용 방법 (단계별)

1. 1

   패턴 종류 선택

   줄무늬·점·격자·체크판 등 기본 스타일을 출발점으로 고릅니다.

2. 2

   색·크기 조정

   미리보기가 실시간으로 갱신되는 동안 색·간격·각도를 설정합니다.

3. 3

   CSS 복사

   생성된 배경 CSS를 요소에 붙여넣습니다 — 이미지 파일이 필요 없습니다.

작동 원리

생성기는 CSS 그라디언트(선형·방사형)를 background-size와 결합해 이음매 없이 반복되는 타일을 만듭니다. 컨트롤로 색·간격·각도·패턴 종류를 조정하면 실시간 미리보기가 갱신됩니다. 전부 그라디언트라 브라우저가 이미지 HTTP 요청 없이 패턴을 그리고, 어떤 화면에서도 선명하게 확대됩니다. 도구는 붙여넣기 좋은 CSS를 출력합니다.

이럴 때 쓰세요

섹션이나 히어로에 은은한 질감 배경을 더할 때. 배경 이미지를 가볍고 확장 가능한 CSS로 대체할 때. 테마에 맞게 색을 바꿀 수 있는 브랜드 패턴을 만들 때. 고DPI 화면에서도 선명한 반복 디자인을 만들 때. 디자인 도구를 열지 않고 배경을 프로토타이핑할 때. CSS 그라디언트가 어떻게 반복 패턴을 만드는지 배울 때.

자주 묻는 질문