6XC

CSS 스크롤바 생성기

실시간 미리보기로 나만의 색상 스크롤바를 디자인하고 CSS를 복사하세요 — WebKit과 Firefox 모두 지원합니다.

조회수 741회

이 영역은 커스텀 스크롤바를 테스트하기 위한 공간입니다. 아래로 스크롤하면 오른쪽 막대가 설정한 디자인대로 움직이는 것을 볼 수 있습니다. 색상과 크기를 바꾸면 결과가 이 상자에 즉시 반영됩니다.

이 영역은 커스텀 스크롤바를 테스트하기 위한 공간입니다. 아래로 스크롤하면 오른쪽 막대가 설정한 디자인대로 움직이는 것을 볼 수 있습니다. 색상과 크기를 바꾸면 결과가 이 상자에 즉시 반영됩니다.

이 영역은 커스텀 스크롤바를 테스트하기 위한 공간입니다. 아래로 스크롤하면 오른쪽 막대가 설정한 디자인대로 움직이는 것을 볼 수 있습니다. 색상과 크기를 바꾸면 결과가 이 상자에 즉시 반영됩니다.

이 영역은 커스텀 스크롤바를 테스트하기 위한 공간입니다. 아래로 스크롤하면 오른쪽 막대가 설정한 디자인대로 움직이는 것을 볼 수 있습니다. 색상과 크기를 바꾸면 결과가 이 상자에 즉시 반영됩니다.

이 영역은 커스텀 스크롤바를 테스트하기 위한 공간입니다. 아래로 스크롤하면 오른쪽 막대가 설정한 디자인대로 움직이는 것을 볼 수 있습니다. 색상과 크기를 바꾸면 결과가 이 상자에 즉시 반영됩니다.

이 영역은 커스텀 스크롤바를 테스트하기 위한 공간입니다. 아래로 스크롤하면 오른쪽 막대가 설정한 디자인대로 움직이는 것을 볼 수 있습니다. 색상과 크기를 바꾸면 결과가 이 상자에 즉시 반영됩니다.

CSS로 스크롤바를 꾸미는 방법

스크롤바를 꾸미는 방식은 두 가지입니다. WebKit 계열 브라우저(Chrome, Edge, Safari)는 ::-webkit-scrollbar 의사 요소 계열을 사용해 트랙, 손잡이(thumb), 너비, 모서리 반경까지 세밀하게 스타일링할 수 있고, Firefox는 더 단순한 표준 속성인 scrollbar-color와 scrollbar-width를 사용합니다. 생성된 코드에는 두 방식 모두 포함되어 있어 어떤 브라우저에서도 일관된 모습을 유지합니다.

색상, 너비, 모서리 반경을 조절해 보세요. 오른쪽 미리보기 영역이 적용된 디자인 그대로 스크롤되며, CSS도 즉시 갱신됩니다.

자주 묻는 질문

Firefox에서는 왜 스크롤바 모양이 다르게 보이나요?

Firefox는 ::-webkit-scrollbar 규칙을 무시하고 scrollbar-color(손잡이와 트랙 색상)와 scrollbar-width만 반영합니다. 모서리 반경과 호버 효과는 WebKit 전용 기능이라 Firefox에서는 단순화된 형태로 표시됩니다.

특정 요소 하나의 스크롤바만 꾸밀 수 있나요?

네 — 선택자 범위를 좁히면 됩니다. 예: .my-box::-webkit-scrollbar { … } 그리고 .my-box { scrollbar-color: … }. 페이지 전체에 적용하려면 html이나 body에(또는 이 생성기의 기본 선택자를 그대로) 적용하세요.

커스텀 스크롤바가 모바일에서도 작동하나요?

대부분 작동하지 않습니다. iOS와 대다수 Android 브라우저는 이런 스타일을 무시하는 오버레이 방식 스크롤바를 사용합니다. 커스텀 스크롤바는 데스크톱 전용 개선 사항으로 생각하세요.

비슷한 도구

CSS 그라데이션 생성기 실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요. 생성하기 CSS 박스 그림자 생성기 오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요. 생성하기 CSS 모서리 둥글기 생성기 각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요. 생성하기 CSS 텍스트 그림자 생성기 오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요. 생성하기