CSS 배경 패턴 생성기
줄무늬, 점, 격자 또는 체크무늬 배경을 만들고 즉시 확인해 CSS를 복사하세요.
배경 위의 텍스트가 잘 보이도록 대비를 선택하세요.
대각선 줄무늬에 사용합니다. 다른 패턴은 적용 가능한 경우에만 생성된 CSS에 이 값을 포함합니다.
미리 보기
미리 보기는 현재 브라우저가 지원하는 CSS 그라데이션을 사용합니다. 오래된 브라우저나 인쇄에서는 모습이 다를 수 있으며, 색상 패턴만으로 정보를 전달하지 마세요.
사용 방법
사용 방법
- 패턴을 고르고 전경색과 바탕색을 설정합니다.
- 타일, 선 또는 점 크기와 해당하는 경우 줄무늬 각도를 조정합니다.
- CSS를 복사해 스타일시트의 요소에 적용합니다.
로컬 CSS 그라데이션 패턴 네 가지
줄무늬는 repeating-linear-gradient, 점은 radial-gradient, 격자는 선형 그라데이션 두 개, 체크무늬는 conic-gradient를 사용합니다. 이미지 다운로드, 서버 호출, 타사 패키지 없이 페이지에서 만들며 표준 CSS 조합입니다.
미리보기와 브라우저 범위
타일 크기는 점·격자·체크무늬 반복 영역을, 세부 크기는 줄 너비·점 반경·격자 선 너비를 제어합니다. 각도는 줄무늬에 적용됩니다. 최신 브라우저가 지원하지만 안티앨리어싱과 인쇄 결과는 다를 수 있습니다. 장식용으로 쓰고 중요한 정보는 색상만으로 전달하지 마세요.
자주 묻는 질문
더 알아보기
이미지 파일을 만드나요?
아니요. 브라우저에서 반복 배경을 그리는 CSS 선언만 만듭니다. 스타일시트 등에 복사하세요.
다른 브라우저에서 조금 달라 보이는 이유는?
특히 작은 타일이나 기울어진 가장자리에서 그라데이션 안티앨리어싱이 다를 수 있습니다. 색상, 크기, 지침은 동일합니다.
미리보기 자체가 접근성 있나요?
접근 가능한 텍스트 레이블은 있지만 시각 패턴은 장식으로 유지하세요. 필요한 정보는 텍스트, 레이블 또는 색상 이외의 단서로 제공하세요.