CSS 스크롤바 생성기

스크롤바 두께·모서리 반경·색상·호버/누름 상태를 WebKit(::-webkit-scrollbar)과 Firefox(scrollbar-color) 양쪽 규칙으로 만드세요.

두께: 14px

두께를 0으로 하면 스크롤은 되지만 막대는 숨겨집니다.

모서리 반경: 8px 트랙과 엄지의 모서리를 따로 지정

트랙#f1f1f1

엄지(손잡이)#6b7280

엄지(호버)#4b5563

트랙·엄지의 호버·누름 색상트랙 테두리: 0px엄지 테두리: 0px엄지 최소 길이: 0px

0이면 페이지가 길어지는 만큼 손잡이가 계속 작아집니다.

그림자 번짐: 0px적용 대상

비워 두면 페이지의 모든 스크롤바에 적용됩니다. .chat, main처럼 요소를 적으면 그 요소의 막대에만 적용됩니다.

브라우저 주석 포함

실시간 미리보기 — 두 박스 안을 스크롤하세요

밝은 배경 위

이 박스를 스크롤해 사용자 지정 스크롤바를 확인하세요. 세로·가로 막대 모두 위에서 고른 색상·두께·반경으로 스타일이 적용됩니다.

어두운 배경 위

이 박스를 스크롤해 사용자 지정 스크롤바를 확인하세요. 세로·가로 막대 모두 위에서 고른 색상·두께·반경으로 스타일이 적용됩니다.

/* Chrome, Edge, and Safari */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background: #6b7280;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4b5563;
}

/* Firefox */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: auto;
    scrollbar-color: #6b7280 #f1f1f1;
  }
}

모든 브라우저에서 스크롤바 스타일링

기본 스크롤바는 운영체제마다 모양이 다르고, 투박한 회색 막대는 정성껏 디자인한 UI와 어울리지 않습니다. 이 생성기로 두께, 트랙과 엄지의 모서리 반경(함께 또는 따로), 트랙·엄지의 기본·호버·누름 색상, 각 부위의 테두리, 엄지 최소 길이, 그림자까지 지정하고 바로 붙여넣을 수 있는 CSS를 복사하세요. Chrome·Edge·Safari용 WebKit ::-webkit-scrollbar 의사 요소와 Firefox용 표준 scrollbar-width·scrollbar-color를 함께 출력하므로 Firefox에도 두께와 색상이 적용됩니다.

실시간 미리보기와 복사 출력

강제 오버플로가 걸린 미리보기 박스 두 개가 — 하나는 밝은 배경, 하나는 어두운 배경 — 슬라이더와 색상 변경에 맞춰 세로·가로 막대를 실시간으로 보여주므로, 코드에 넣기 전에 두 배경 모두에서 대비를 확인할 수 있습니다. 출력은 빌드 과정이나 라이브러리가 필요 없는 순수 CSS입니다. '적용 대상'을 비워 두면 페이지의 모든 스크롤바를 바꾸고, .chat이나 main처럼 요소를 적으면 복사되는 블록이 그 패널에만 적용됩니다. 브라우저 주석은 끌 수 있고, 설정 전체가 페이지 링크에 담깁니다. 두께를 0으로 하면 스크롤은 되지만 막대는 보이지 않는 숨김 스크롤바를 만들 수 있습니다.

자주 묻는 질문

Chrome과 Safari에서 스크롤바를 어떻게 스타일링하나요?

::-webkit-scrollbar 의사 요소를 사용합니다. 이 도구는 두께를 지정하는 ::-webkit-scrollbar와 ::-webkit-scrollbar-track·::-webkit-scrollbar-thumb·::-webkit-scrollbar-thumb:hover를 색상·반경과 함께 생성하며, 호버·누름 색상을 지정하면 트랙과 엄지의 :hover·:active 규칙도 함께 출력합니다. CSS에 붙여넣으면 Chrome·Edge·Safari에서 즉시 적용됩니다.

엄지에 테두리를 주거나 트랙에서 안쪽으로 들여놓을 수 있나요?

둘 다 되지만 동시에는 안 됩니다. 같은 컨트롤이기 때문입니다. 엄지 테두리 두께를 준 뒤 색을 고르거나 '투명하게'를 체크하세요. 스크롤바 부위에는 테두리 상자가 하나뿐이라, 투명 테두리에 background-clip: content-box를 더한 것이 손잡이를 홈에서 들여놓는 방법입니다. CSS에 스크롤바용 padding 속성이 없기 때문입니다.

Firefox에서도 되나요?

네. Firefox는 ::-webkit-scrollbar를 지원하지 않으므로 표준 scrollbar-width와 scrollbar-color 속성도 함께 출력합니다. 두 블록이 함께 복사되므로 한 번 붙여넣으면 두 엔진 모두에 적용됩니다.

얇거나 보이지 않는 스크롤바는 어떻게 만드나요?

두께 슬라이더를 낮추면 얇아지고, 12px보다 작으면 Firefox용으로 scrollbar-width: thin이 자동으로 붙습니다. 두께를 0으로 두면 스크롤은 되지만 보이지 않는 스크롤바가 되며, WebKit에는 width·height 0으로, Firefox에는 scrollbar-width: none으로 출력됩니다.