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와 그라디언트 안의 색을 편집하거나, 여기서 새 색상으로 다시 생성해 새 스니펫을 복사하세요.

관련 도구

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

색상 혼합기

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

PHP 포매터

간단한 PHP 코드에 줄바꿈과 2칸 또는 4칸 들여쓰기를 추가합니다. 결과를 반드시 검토하세요. PHP 파서나 PSR-12 적용 도구가 아닙니다.

OpenAPI 검증기

OpenAPI 또는 Swagger 문서를 JSON이나 YAML로 붙여넣고 핵심 구조를 점검하세요: 버전 필드, info 객체, paths를 명확한 오류와 경고와 함께 확인합니다.

CSS 로딩 애니메이션 생성기

순수 CSS로 원형 스피너를 만듭니다. 지름, 테두리 두께, 포인트 색상, 회전 속도를 설정하고 미리 보기를 확인한 뒤 바로 쓸 수 있는 CSS를 복사하세요. SVG도 자바스크립트도 필요 없습니다.

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