본문으로 건너뛰기
Toolars
둘러보기
버그 신고

디자인 · 로컬 유틸리티

CSS 배경 패턴 생성기

CSS Background Pattern Generator

순수 CSS 그라데이션만으로 점, 격자, 사선 배경 패턴을 조합합니다. 이미지 파일 없이 타일과 표시 크기, 색을 조절합니다.

작업 경로 / 입력에서 결과까지

패턴 선택하기

로컬에서 실행 · 업로드 없음

CSS 배경 패턴 생성기 사용법, 개인정보 보호 및 관련 도구

작업 경로 / 입력에서 결과까지

CSS 배경 패턴을 만드는 방법

  1. 01

    패턴 선택하기

    패턴을 열고 점, 그리드, 사선 중에서 고르세요. 셋 모두 CSS 그라데이션만으로 구성되며 이미지 파일은 전혀 쓰지 않습니다. 셋 사이를 오가도 타일, 표시, 색상 값은 유지되므로 스타일 비교에 비용이 들지 않습니다. 기본 28px 점 그리드는 조용한 출발점입니다.

  2. 02

    타일 설정하기

    타일 크기를 8~96px, 표시 너비를 1~16px 사이에서 고르세요. 표시 너비는 타일 크기의 절반을 넘을 수 없습니다. 넘으면 상태가 값 확인으로 바뀌고 해당 규칙을 알려주세요.

  3. 03

    두 색상 고르기

    패턴 색상이 표시를 그리고 캔버스 색상이 그 아래 바탕을 채워요. 은은한 패턴은 두 색 사이의 낮은 대비에서 나와요. 캔버스보다 아주 약간 어두운 정도의 표시는 장식이 아니라 질감으로 읽혀요.

  4. 04

    실제 스케일로 반복 판단하기

    미리보기는 결과를 패널 전체에 타일처럼 깔아 주므로, 약한 대비와 빽빽한 타일이 여기서 드러나요. 경험칙으로, 표시는 타일의 절반보다 훨씬 작게 유지하세요. 28px 타일의 2px 표시는 노이즈가 아니라 질감으로 읽혀요.

  5. 05

    패턴 CSS 복사하기

    CSS 복사 또는 .css 다운로드로 toolars-background-pattern.css를 저장하세요. .pattern 규칙은 background-color, background-image, background-size 세 선언뿐이라 어떤 요소에도 바로 적용할 수 있습니다.

  6. 06

    규칙 적용하고 적응시키기

    이 규칙은 배경만 칠하므로 레이아웃 부작용 없이 어떤 요소에도 붙어요. 나중에 background-size를 조정해 패턴 밀도를 바꾸고, 패턴이 텍스트와 경쟁할 때는 표시를 줄이는 대신 두 색 사이의 대비를 낮추세요.

도구 요약

처리
브라우저에서 완결
입력의 기기 외 전송
없음
저장
아무것도 저장하지 않음
가격
무료

입력 값은 브라우저에 머물러요.

CSS 배경 패턴 생성기 도구는 검증된 로컬 실행 경로를 사용하고, 숨겨진 입력 또는 출력 기록을 만들지 않습니다.

로컬 실행

현재 브라우저 탭 안에서 실행됩니다.

숨겨진 처리 없음

사용 중인 도구 데이터는 Toolars 문서 기록으로 남지 않습니다.

계정 불필요

프로필을 만들지 않고도 핵심 워크플로를 사용할 수 있습니다. 즐겨찾기는 로그인 후 계정에 동기화됩니다.

즉시 초기화

탭을 정리하면 사용 중이던 작업 데이터도 사라져요.

CSS 배경 패턴 생성기 도구가 실제로 하는 일

문서 페이지에는 코드 뒤에 옅은 점을, 랜딩 페이지에는 PNG 없이 사선을, 대시보드에는 격자선을 넣을 수 있어요. 미리보기와 내보낸 규칙은 같은 그라데이션 값, 타일 크기, 색을 사용하지만 최종 모습은 요소 크기와 브라우저 렌더링에도 달려 있어요. 실제 콘텐츠 뒤에 CSS를 적용해 확인하세요.

자주 묻는 질문

정말 이미지를 쓰지 않나요?
맞아요. 점은 방사형 그라데이션, 그리드는 교차하는 두 개의 선형 그라데이션, 사선은 반복 선형 그라데이션입니다. 타일 반복은 background-size가 맡아요. 결과는 어떤 해상도로도 스케일되고 추가 요청도 발생하지 않습니다.
표시 너비가 거부되는 이유는 무엇인가요?
표시 너비는 타일 크기의 절반을 넘을 수 없습니다. 그 이상이면 표시끼리 한 면으로 녹아 버려요. 값 확인 메시지에 그 한도가 명시되고, 값이 통과할 때까지 복사와 다운로드는 비활성화됩니다.
타일이 이음매 없이 이어지나요?
네. 각 패턴은 선택한 타일 크기로 가장자리부터 가장자리까지 반복되도록 설계됐어요. 실시간 미리보기에 보이는 깔린 면이 볼낸 CSS가 실제 페이지에서 그리는 것과 같습니다. 반복이 하나의 background-size 값에서 나오므로, 나중에 밀도를 바꿔도 이음매는 깨지지 않습니다.
그라데이션의 반 픽셀 틈은 무슨 용도인가요?
반 픽셀 구간에서 표시 색이 투명하게 바뀌는 패턴은 「점」뿐이에요. 그 구간은 표시 너비에서 너비에 0.5 px를 더한 곳까지예요. 「격자」는 선형 그라데이션 두 개, 「사선」은 반복 선형 그라데이션을 사용하며 같은 구간은 없어요. 가는 선은 대상 브라우저에서 확인하세요.
패턴 두 개를 겹칠 수 있나요?
워크스페이스는 의도적으로 규칙당 패턴 하나를 조합합니다. CSS는 쉼표로 구분된 background-image 레이어를 허용하므로, 복사한 후 두 번째 패턴을 손으로 쌓을 수 있습니다. 각 레이어의 투명한 영역이 둘을 결합할 수 있게 해주세요.
설정 값이 어딘가로 전송되나요?
아니요. 모든 것이 현재 브라우저 탭 안에서 생성되고 계정도 필요 없습니다. 어떤 값도 저장소, 로그, 분석에 들어가지 않습니다. 초기화를 누륵면 기본 점 패턴으로 돌아가요.

디자인 카테고리에서 계속하기

막다른 길이 아니라 이어지는 작업입니다.

전체 인덱스로 돌아가지 않고 다른 집중 워크스페이스로 바로 이동합니다.

CSS 로더 생성기

CSS Loader Generator

궤도 링이나 점 세 개 로딩 스피너를 크기, 굵기, 속도, 색상 제어로 디자인하고 reduced-motion을 존중하는 CSS를 복사합니다.

생성

CSS 체크박스 생성기

CSS Checkbox Generator

크기, 테두리, 상태 색상으로 커스텀 체크박스를 꾸미고, 키보드 접근이 가능한 실제 input을 유지하는 CSS를 복사합니다.

생성

CSS 스위치 생성기

CSS Switch Generator

트랙, 썸, 두 상태 색상을 갖춘 순수 CSS 토글 스위치를 만들고 포커스와 reduced-motion 처리를 포함한 코드를 복사합니다.

생성

CSS clip-path 생성기

CSS Clip Path Generator

드래그, 키보드 또는 좌표로 다각형을 편집하세요. 네 가지 프리셋에서 시작해 clip-path 선언이나 전체 CSS를 로컬에서 복사합니다.

생성