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 표.

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

ASCII 이진수 변환기

ASCII 문자열을 이진수 표현으로 변환하세요. 각 문자는 8비트가 되고 공백으로 구분되어 프로토콜 추적이나 과제에 바로 붙여넣기 좋습니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이 도구는 다른 언어로도 제공됩니다