Softonic

패턴 배경 생성기

단계 1 / 3

패턴 선택

각 항목은 이미지 파일 없이 반복되는 CSS 그라디언트 패턴을 만듭니다.

패턴 유형

점, 격자, 촘촘한 줄무늬, 체커보드, 크로스해치, 간격이 넓은 대각선 중 하나를 고른 뒤 배경색, 패턴색, 반복 간격을 설정하세요. CSS 그라디언트로 만든 반복 배경을 실시간으로 확인하고 CSS 규칙에 붙여 넣을 속성을 복사할 수 있습니다. 선택한 패턴에 따라 background-color, background-image, background-size, background-position을 사용합니다. 이미지나 SVG 파일은 만들지 않습니다.

패턴을 생성하는 방법

  1. 1

    패턴 선택

    점, 격자, 촘촘한 줄무늬, 체커보드, 크로스해치, 간격이 넓은 대각선.

  2. 2

    두 가지 색상 설정

    배경색과 그라디언트 선이나 도형에 사용할 패턴색을 선택하세요.

  3. 3

    간격 조절

    반복 간격을 촘촘한 5px부터 여유 있는 80px까지 설정하세요.

  4. 4

    실시간 미리보기 확인

    패턴, 색상, 간격을 바꾸면 미리보기가 즉시 갱신됩니다.

  5. 5

    CSS 복사

    생성된 속성을 복사해 원하는 CSS 규칙에 붙여 넣으세요.

순수 CSS, 이미지 파일 없음

모든 패턴은 단색 background-color 위에 CSS 그라디언트로 그려집니다. 별도의 배경 이미지를 호스팅하거나 요청할 필요가 없습니다. 점 패턴은 다음과 같습니다:

.hero {
  background-color: #1F2937;
  background-image: radial-gradient(#FFFFFF 1px, transparent 1px);
  background-size: 20px 20px;
  background-repeat: repeat;
}

CSS 배경은 기본적으로 반복됩니다. 생성된 크기와 위치 값은 반복될 때 각 레이어가 맞물리도록 설정되지만, 브라우저 확대 비율과 소수 단위의 기기 픽셀에 따라 가장자리가 조금 다르게 보일 수 있습니다. 간격 값을 바꾸면 질감을 더 촘촘하거나 여유 있게 만들 수 있습니다.

각 모티프는 무엇으로 만들어지나

모티프 구성 어울리는 용도
점 반복되는 radial-gradient 기술 페이지, 대시보드, 모던 UI
격자 교차하는 두 개의 linear-gradient 선 모눈종이 느낌, 화이트보드, 플래너
촘촘한 줄무늬 45도 repeating-linear-gradient 이발소 회전 간판풍 포인트, 경쾌한 섹션
체커보드 네 개의 기울어진 linear-gradient 레이어 레트로 UI, 투명 배경 스타일
크로스해치 교차된 두 개의 repeating-linear-gradient 스케치·인쇄 질감, 에디토리얼
간격이 넓은 대각선 하나의 45도 repeating-linear-gradient 경고 상태, 줄무늬 차양, 스포츠

색상과 대비 팁

  • 배경에는 낮은 대비를 사용하세요. 배경색과 가까운 패턴색은 대체로 은은하게 보입니다. 강한 대비는 페이지 콘텐츠와 시선을 다툴 수 있습니다.
  • 브랜드에 맞추세요. 밋밋한 회색 대신 브랜드 색상을 패턴색으로 써서 질감을 정체성과 연결하세요.
  • 다크 모드. 어두운 배경과 조금 밝은 패턴색을 시험해 보세요. 넓은 어두운 면에서는 강한 대비가 산만해 보일 수 있습니다.
  • 텍스트를 두 색 모두와 비교하세요. 텍스트가 패턴 위에 있다면 글자 아래에 나타날 수 있는 배경색과 패턴색 각각에 대해 텍스트 색의 대비를 확인하세요. 이 도구는 패턴을 미리 보여 주지만 WCAG 대비 검사를 수행하지 않습니다.

어디에 쓸까

  • 히어로와 섹션 배경: 이미지 없이 약간의 질감이 필요할 때.
  • 카드와 패널: 대시보드에서 옅은 격자나 점이 구조감을 더할 때.
  • 빈 상태와 플레이스홀더: 체커보드가 중립적으로 읽힐 때.
  • 인쇄 스타일 레이아웃과 슬라이드: 모눈종이나 크로스해치 느낌이 필요할 때.

별도 배경 파일이 아닌 CSS 패턴이므로 이미지 요청이 추가되지 않습니다. 나중에 브라우저 개발자 도구에서 그라디언트, 크기, 위치 값도 조정할 수 있습니다.

자주 묻는 질문

아니요. 출력은 순수 CSS입니다. background-color와 CSS 그라디언트로 만든 background-image이지요. CSS를 복사해 요소에 붙여넣으면 됩니다. 다운로드하거나 호스팅할 이미지나 SVG 파일이 없습니다.

CSS 배경은 기본적으로 반복됩니다. 생성된 크기와 위치 값은 선택한 패턴의 각 레이어를 맞춥니다. 브라우저 확대 비율이나 소수 단위의 기기 픽셀 때문에 반복 가장자리가 약간 다르게 보일 수 있으므로 실제 사용 크기에서 확인하세요.

낮은 대비의 패턴은 대체로 덜 산만하지만 그것만으로 텍스트의 가독성이 입증되지는 않습니다. 텍스트 아래에 올 수 있는 모든 색과 텍스트 색을 비교하세요. 긴 글에는 단색 배경이 검증하기 더 쉬울 수 있습니다.

색상은 CSS 안의 hex 값일 뿐입니다. background-color와 그라디언트 안의 색을 편집하거나, 여기서 새 색상으로 다시 생성해 새 스니펫을 복사하세요.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

랜덤 영어 글자 생성기

A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.

랜덤 색상 팔레트 생성기

2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.

Base64 → Hex 변환기

표준 Base64 문자열을 대문자 16진수로 연속 표기한 바이트로 변환합니다. 엄격한 디코딩 방식으로 토큰, 키, JWT 서명 확인에 적합합니다.

2진수를 10진수로 변환

이진수를 십진수로, 또는 십진수를 이진수로 즉시 변환합니다. 숫자 하나를 붙여 넣고 결과를 읽으세요.

2진수 8진수 변환기

비트를 세 개씩 묶어 2진수를 8진수로 변환합니다. Unix 권한, 레거시 시스템, 간결한 숫자 표시에 유용합니다.