CSS 스크롤바 스타일러
색상·두께·둥글기를 조절해 커스텀 스크롤바 CSS를 생성
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
브라우저의 밋밋한 기본 스크롤바를 웹사이트 디자인에 맞게 꾸며주는 도구입니다. 손잡이(thumb)와 트랙 색상, 두께, 모서리 둥글기를 슬라이더와 컬러 피커로 조절하면 미리보기 영역에서 바로 결과를 확인할 수 있고, 모든 계산은 브라우저 안에서만 이뤄져 별도 서버 전송 없이 즉시 CSS 코드를 얻을 수 있습니다.
사용 방법
- 컬러 피커나 HEX 입력창에서 손잡이 색상과 트랙(배경) 색상을 지정합니다.
- 두께와 둥글기 슬라이더를 움직여 원하는 스크롤바 모양을 만듭니다.
- 화면 위 미리보기 박스를 직접 스크롤하며 실제 적용 모습을 확인합니다.
- 완성된 CSS 코드를 'CSS 복사' 버튼으로 복사해 내 프로젝트의 스타일시트에 붙여넣습니다.
자주 묻는 질문
- 생성된 CSS가 모든 브라우저에서 작동하나요?
- 네. WebKit 계열(Chrome, Safari, Edge)의 ::-webkit-scrollbar 의사 요소 문법과 Firefox의 표준 scrollbar-color, scrollbar-width 속성을 함께 생성하므로 두 렌더링 엔진 모두에서 적용됩니다.
- 생성된 CSS는 어디에 적용해야 하나요?
- 코드 상단의 .custom-scrollbar 클래스명을 원하는 요소의 클래스명으로 바꾼 뒤 해당 요소에 지정하면, 그 요소 내부의 스크롤 영역에만 스타일이 적용됩니다.
- 입력한 정보가 서버로 전송되나요?
- 아니요. 색상 선택과 CSS 생성 과정은 모두 브라우저 내에서 즉시 처리되며 어떤 데이터도 외부로 전송되지 않습니다.