CSS 스크롤바 생성기
비주얼 에디터로 CSS 스크롤바 디자인을 커스터마이즈합니다. 색상, 너비, 테두리 반경을 조정하고 코드를 바로 복사합니다.
/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: #555555;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #888888 #f1f1f1;
}스크롤 콘텐츠 #1 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #2 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #3 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #4 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #5 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #6 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #7 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #8 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #9 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #10 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #11 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #12 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #13 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #14 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #15 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #16 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #17 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #18 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #19 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #20 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #21 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #22 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #23 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #24 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #25 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #26 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #27 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #28 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #29 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
스크롤 콘텐츠 #30 - 커스텀 스크롤바를 미리봅니다. 스크롤하여 확인하세요.
사용 방법
스타일 설정
스크롤바 너비, 색상, 테두리 반경 등을 설정합니다
미리보기
실시간 미리보기에서 스크롤바 모양을 확인합니다
CSS 복사
생성된 CSS 코드를 복사합니다
기능
실시간 미리보기
설정을 변경하면서 실시간으로 스크롤바를 미리봅니다
크로스 브라우저 지원
WebKit과 Firefox용 CSS를 자동으로 생성합니다
호버 & 활성 상태
호버 및 드래그 상태의 스타일을 개별적으로 커스터마이즈합니다
FAQ
🔗관련 도구
색상 코드 변환기
HEX, RGB, HSL 색상 코드 간 변환을 합니다. 색상 선택기와 실시간 미리보기로 직관적인 색상 선택이 가능합니다.
색상 선택기
색상 휠과 슬라이더로 직관적으로 색상을 선택하세요. HEX, RGB, HSL 형식의 색상 코드를 확인하고 복사할 수 있습니다.
이미지 색상 추출기
이미지에서 대표 색상을 자동으로 감지하고 색상 팔레트를 생성합니다. 이미지의 아무 곳이나 클릭하여 개별 색상을 추출할 수도 있습니다.
이미지 평균 색상 추출기
이미지 전체 또는 선택 영역의 평균 색상을 계산합니다. 색상 배합이나 썸네일 배경색 선택에 유용합니다.
CSS 그라데이션 생성기
드래그 조작으로 CSS 그라데이션을 시각적으로 만듭니다. 선형, 원형, 원추형 그라데이션 유형과 프리셋을 지원합니다.
CSS 박스 그림자 생성기
슬라이더로 CSS box-shadow를 시각적으로 만듭니다. 다중 그림자와 내부 그림자를 지원합니다.