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 बनाएं। एकाधिक शैडो और इनसेट शैडो का समर्थन करता है।