디자인 / CSS
CSS 패턴 생성기(줄무늬, 점, 격자, 체크무늬)
CSS 그라디언트만으로 반복되는 배경 패턴을 만듭니다. 두 가지 색상, 크기, 선 너비를 직접 설정해 줄무늬, 대각선 줄무늬, 격자선, 물방울무늬, 체크무늬, 지그재그를 만들고 CSS를 복사할 수 있습니다.
CSS 패턴 생성기(줄무늬, 점, 격자, 체크무늬): 각 패턴은 선택한 크기로 반복되는 하나 또는 두 개의 CSS 그라디언트로 구성됩니다. 줄무늬에는 repeating-linear-gradient를 사용하고, 격자에는 서로 교차하는 두 개의 linear-gradient를 사용하며, 점에는 radial-gradient를 사용하고, 체크무늬에는 repeating-conic-gradient를 사용합니다. 이미지 파일이 없으므로 어떤 확대 비율에서도 패턴이 선명하게 유지되며 로드 비용도 들지 않습니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
CSS
.pattern {
background-color: #f2faed;
background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}각 패턴은 CSS 그라디언트만으로 그리므로 다운로드할 이미지가 없고, 어떤 확대 비율에서도 선명하게 유지되며, 스타일시트에서 색상을 변경할 수 있습니다. 텍스트 뒤의 패턴은 은은하게 유지하십시오. 두 색상의 대비를 낮추면 텍스트를 읽기 쉽습니다.
체커보드 그리는 방식
repeating-conic-gradient(#000 0 25%, transparent 0 50%)은 각 타일 중심을 기준으로 회전하는 영역의 첫 번째와 세 번째 1/4을 칠합니다. 그 결과 타일마다 대각선으로 배치된 두 개의 정사각형이 생깁니다. background-size는 타일을 정사각형 크기의 두 배로 설정합니다.
패턴 결합
배경 이미지는 겹쳐 쌓입니다. 패턴 뒤에 CSS 그라데이션 생성기의 그라데이션을 쉼표로 구분하여 나열하면 패턴이 그라데이션 위에 표시됩니다.
사용 방법
- 패턴을 선택합니다.
- 두 가지 색상, 반복 크기, 선 너비 또는 점 크기를 선택합니다.
- CSS를 복사합니다.
개인정보 보호 및 제한사항
모든 작업은 브라우저에서 실행됩니다.
관련 도구
자주 묻는 질문
패턴은 모든 브라우저에서 작동합니까?
예. 체크무늬에 사용되는 conic gradient를 포함해, 현재 사용되는 모든 브라우저가 이 그라디언트를 지원합니다.
텍스트 뒤에 패턴을 넣으려면 어떻게 합니까?
서로 비슷한 두 가지 색상을 선택하면 패턴이 은은하게 유지되고 텍스트의 대비도 충분히 확보됩니다.
줄무늬의 각도를 변경할 수 있습니까?
예. 복사한 CSS의 repeating-linear-gradient에서 각도를 수정하면 됩니다. 예를 들어 45deg 대신 60deg를 사용할 수 있습니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요