CSS 배경 패턴 생성기

CSS는 그라데이션만으로 반복되는 배경 패턴을 그릴 수 있습니다. 색 정지점을 딱딱하게 끊으면 그라데이션이 줄무늬가 되고, background-size가 타일 하나를 요소 전체에 반복합니다. 결과는 어떤 확대 비율에서도 선명하고, 내려받을 파일이 없으며, 값 하나만 바꿔도 색이 달라집니다. 이 생성기는 각도 자유 줄무늬, 물방울무늬, 점 격자, 체크무늬, 격자선, 모눈종이, 교차 빗금, 지그재그, 마름모, 반사각 삼각형까지 이음매 없는 열 가지 패턴을 만들고, CSS를 브라우저에서 미리 보여 주며 SVG 버전도 제공합니다.

사용 방법

1. 패턴을 고릅니다.
2. 패턴 색과 배경색을 정합니다.
3. 타일 크기와 줄무늬 너비, 선 두께 또는 점 크기(줄무늬는 각도도)를 정합니다.
4. CSS를 복사하거나, 디자인 도구용으로 SVG 패턴을 내려받습니다.

계산식

stripes: repeating-linear-gradient(angle, color 0 w, transparent w s) · dots: radial-gradient(circle, color r, transparent r + 1px) with background-size s s · grid: linear-gradient(color t, transparent t) across and down

s는 타일 크기, w는 줄무늬 너비, r은 점 크기의 절반, t는 선 두께입니다. 같은 위치의 색 정지점 두 개는 번지지 않고 딱딱한 경계를 만듭니다. 지그재그와 마름모 패턴은 45° 그라데이션 네 개를 쓰며, 각각 타일의 한 모서리에 삼각형을 칠합니다.

예시

기본값인 45° 줄무늬, #eff6ff 위의 #2563eb, 24 px마다 8 px 너비는 background-image: repeating-linear-gradient(45deg, #2563eb 0 8px, transparent 8px 24px);가 됩니다. 40 px 체크무늬는 원뿔 그라데이션 하나로, conic-gradient(#2563eb 90deg, transparent 90deg 180deg, #2563eb 180deg 270deg, transparent 270deg)에 background-size: 40px 40px을 쓰면 20 px 정사각형이 만들어집니다.