스트라이프 패턴 배경 생성기
각도·색상·두께 조절로 CSS 줄무늬 배경을 만들고 코드를 복사하세요
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
repeating-linear-gradient를 이용해 대각선, 핀스트라이프, 경고 패턴 등 다양한 줄무늬 배경을 실시간으로 만들 수 있는 도구입니다. 웹 디자이너나 개발자가 배너, 섹션 배경, 장식 요소용 CSS 코드를 빠르게 얻을 때 유용하며, 모든 계산은 브라우저에서만 이뤄져 서버로 전송되지 않습니다.
사용 방법
- 미리 준비된 프리셋(대각선, 핀스트라이프, 경고, 캔디 케인, 파스텔 등) 중 하나를 클릭해 시작합니다
- 각도 슬라이더와 두 색상의 두께 슬라이더를 조절해 원하는 패턴으로 다듬습니다
- 색상 피커나 HEX 입력으로 두 가지 색상을 직접 지정합니다
- 미리보기를 확인한 뒤 생성된 CSS 코드를 복사해 프로젝트에 붙여넣습니다
자주 묻는 질문
- 생성된 CSS는 어떤 속성에 사용하나요?
- background-image 속성 값으로 그대로 붙여넣으면 됩니다. 별도의 이미지 파일 없이 순수 CSS만으로 패턴 배경이 적용됩니다.
- 이미지 파일로 저장할 수 있나요?
- 이 도구는 CSS 코드만 생성합니다. 이미지 파일이 아닌 코드 형태로 배경을 적용하고 싶은 경우에 적합합니다.
- 모든 브라우저에서 잘 보이나요?
- repeating-linear-gradient는 최신 브라우저 대부분에서 폭넓게 지원되는 표준 CSS 기능입니다.