CSS 배경 패턴 생성기

이 도구는 무엇인가요?

CSS는 이미지 파일 없이도 그라디언트 — radial-gradient()와 linear-gradient() — 를 background-image로 사용하고, 요소보다 작은 background-size와 결합해 그라디언트가 타일처럼 반복되게 함으로써 패턴을 그릴 수 있습니다. 물방울 점은 반복되는 radial-gradient를 쓰고, 줄무늬와 체크무늬는 반복되거나 겹쳐진 linear-gradient()를 쓰며, 격자선은 겹쳐진 두 개의 linear-gradient() 선으로 만듭니다.

이 도구는 이 그라디언트 선언들을 대신 만들어줍니다. 패턴 유형을 고르고 패턴 색상, 배경색, 간격을 조정하면 실시간 미리보기가 즉시 업데이트됩니다 — 그다음 정확한 background-image와 background-size CSS를 복사하면 됩니다.

출처: CSS Images Module Level 3, W3C — 이 패턴의 기반이 되는 repeating-linear-gradient()와 repeating-radial-gradient()를 정의합니다.

왜 사용해야 할까요?

• 이미지 파일도, HTTP 요청도 필요 없습니다 — 패턴은 순수 CSS이며 레티나/고밀도 화면을 포함해 어떤 해상도에서도 즉시 렌더링됩니다.
• 그라디언트 문법을 직접 쓰거나 타일링 계산을 할 필요 없이 색상과 간격을 완전히 조정할 수 있습니다.
• 복사하기 전에 실제로 반복되는 패턴을 실시간 미리보기로 확인할 수 있습니다.
• 래스터 이미지가 아니라 벡터 연산이라서 요소 크기가 바뀌어도 흐려지지 않고 깔끔하게 확대됩니다.
• 전적으로 브라우저 안에서 동작합니다 — 설정한 내용이 어디로도 업로드되지 않습니다.
• 무료, 가입 불필요, 모바일에서도 사용 가능.

사용 방법

1. 패턴 유형을 고르세요: 물방울 점, 대각선 줄무늬, 체크무늬, 격자선.
2. 패턴 색상과, 패턴 도형 사이/뒤로 보이는 배경색을 고르세요.
3. 크기 슬라이더를 조정해 점, 줄무늬, 격자 칸을 더 크거나 작게 만드세요 — 패턴이 얼마나 촘촘히 반복되는지도 함께 조절됩니다.
4. 생성된 CSS를 복사해 원하는 요소의 background-image(그리고 표시되어 있다면 background-size/background-position)로 붙여넣으세요.

예시

입력

패턴: 물방울 점 · 색상: 파랑 · 배경: 흰색 · 크기: 24px

결과

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

은은한 섹션 배경이나 카드 질감으로 자주 쓰이는 클래식한 밝은 물방울 무늬 패턴입니다.

각 패턴이 만들어지는 원리

• 물방울 점: radial-gradient()로 작은 원 하나를 그린 뒤 background-size로 그 원이 격자처럼 반복 타일링되게 합니다.
• 대각선 줄무늬: 45도 각도의 repeating-linear-gradient()가 일정한 간격으로 패턴 색과 배경색을 번갈아 배치합니다.
• 체크무늬: 45도로 기울인 linear-gradient() 두 겹을 서로 반 칸씩 어긋나게 겹쳐서 밝고 어두운 정사각형이 번갈아 나타나게 만듭니다.
• 격자선: 얇은 linear-gradient() 선 두 개(수평 하나, 수직 하나)를 원하는 간격으로 타일링해 모눈종이 같은 격자를 만듭니다.

이미지 파일 대신 CSS 패턴을 써야 할 때

CSS 그라디언트 패턴은 파일 용량도 없고 HTTP 요청도 없어서 즉시 로드되고, 래스터 PNG 배경 타일과 달리 고밀도 화면에서도 흐려 보이지 않습니다. 텍스트 뒤의 은은한 질감, 섹션 구분선, 빈 상태 일러스트, 플레이스홀더 카드에 이상적입니다. 복잡한 일러스트나 사진 느낌의 패턴에는 여전히 실제 이미지가 맞는 선택이며, CSS 그라디언트는 여기 있는 것 같은 단순하고 기하학적인 반복 도형에 가장 잘 맞습니다.

다른 CSS 효과와 조합하기

패턴은 글래스모피즘 카드 뒤 배경으로도 잘 어울립니다. 블러 효과가 제대로 보이려면 뒤에 시각적 질감이 있는 무언가가 필요하기 때문입니다. 컨테이너 요소의 둥근 모서리와도 자연스럽게 어울립니다.

→ CSS 글래스모피즘 생성기 · Border Radius 생성기

자주 묻는 질문