CSS 스크롤바 생성기

커스텀 스크롤바를 디자인하고 크로스 브라우저 CSS를 복사하세요. 두께, 트랙·엄지 각각의 모서리 반경, 호버·누름 색상, 테두리, 그림자, 최소 길이, 적용 대상 선택자를 WebKit과 Firefox 규칙으로 출력합니다. 100% 브라우저 처리, 업로드 없음.

두께: 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를 함께 출력해 엔진 간에 일관된 막대를 만듭니다.

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

강제 오버플로가 걸린 미리보기 박스 두 개가 — 하나는 밝은 배경, 하나는 어두운 배경 — 슬라이더와 색상 변경에 맞춰 세로·가로 막대를 실시간으로 보여주므로, 코드에 넣기 전에 두 배경 모두에서 대비를 확인할 수 있습니다. 출력은 빌드 과정이나 라이브러리가 필요 없는 순수 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 속성도 함께 출력합니다. 두 블록을 같이 복사하면 크로스 브라우저 호환이 됩니다.

업로드되나요?

아니요. CSS는 전부 브라우저에서 생성되며 서버로 전송되지 않습니다. 회원가입도 업로드도 없습니다.

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

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