CSS Scrollbar Generator

Anpassa din webbplats rullningslister med lätthet

Skapa anpassade CSS-rullningslister

Designa vackra, moderna rullningslister som matchar din webbplats stil med vår intuitiva generator. Inga kodningskunskaper krävs!

Börja anpassa Visa exempel

Kontrollbord

8px
0px

Preview

Förhandsgranska innehåll i rullningslisten

Det här är ett demonstrationsområde för din anpassade rullningslist. Justera inställningarna till vänster för att se ändringar i realtid.

Feature 1

Helt anpassningsbara rullningslister för moderna webbplatser och applikationer.

Feature 2

Stöd för flera webbläsare med automatisk prefixering för olika webbläsare.

Exempel på långt textinnehåll: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Mer textinnehåll: Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.

Slut på texten: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum jure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Genererad CSS-kod

Kopierad till urklipp!

Kraftfulla funktioner

Helt anpassningsbar

Justera alla aspekter av din rullningslist inklusive bredd, färger, radie och kanter för att matcha din webbplats design perfekt.

Stöd för flera webbläsare

Generera CSS-kod som fungerar i alla moderna webbläsare, inklusive Chrome, Firefox, Safari och Edge.

Färdiga att använda förinställningar

Börja med professionell design med hjälp av vår utvalda samling av förinställningar för rullningslist för snabb implementering.

Förhandsgranskning i realtid

Se exakt hur rullningslisten kommer att se ut när du gör justeringar med vår interaktiva förhandsgranskningspanel.

Få välformaterad, minimal CSS-kod som är redo att integreras i ditt projekt utan uppblåsthet.

Responsiv design

Skapa rullningslister som anpassar sig perfekt till olika skärmstorlekar och enheter för en konsekvent användarupplevelse.

Så här använder du

1

Anpassa rullningslisten

Använd kontrollpanelen för att justera bredden, färgerna, radien och andra egenskaper för rullningslisten tills den matchar din designvision.

2

Kopiera den genererade CSS:en

När du är nöjd med förhandsgranskningen klickar du på knappen "Kopiera CSS" för att kopiera den genererade koden till ditt urklipp.

3

Lägg till i ditt projekt

Klistra in CSS-koden i projektets formatmall eller använd den infogad. Använd klassen på valfritt element för att se hur din anpassade rullningslist fungerar.

Exempel på rullningslist

Exempel på en modern blå rullningslist med rundade hörn. Perfekt för företagswebbplatser och applikationer.

Den här rullningslisten använder ett ljusblått spår med en mörkare blå tumme som ändrar färg när du håller muspekaren över det.

Scrolla ner för att se full effekt. Tummen har en radie på 5px för släta rundade kanter.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Modern Blå

En elegant blå rullningslist med rundade kanter

Exempel på en subtil mörk rullningslist med minimal formatering. Perfekt för innehållstunga webbplatser.

Den här rullningslisten använder ett mycket ljusgrått spår med en mellangrå tumme som blir mörkare när du håller muspekaren.

Scrolla ner för att se full effekt. Tummen har en liten radie på 3px för mjuka kanter.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Subtil mörk

En minimalistisk mörk rullningslist för innehållswebbplatser

Exempel på en livfull grön rullningslist med djärv stil. Perfekt för miljövänliga eller hälsorelaterade webbplatser.

Den här rullningslisten använder ett ljusgrönt spår med en livlig grön tumme som blir mörkare när du håller muspekaren.

Scrolla ner för att se full effekt. Tummen har en radie på 6px för uttalade rundade kanter.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Livfull grönska

En djärv grön rullningslist för webbplatser med ekotema

Exempel på en snygg lila rullningslist med modern design. Perfekt för kreativa webbplatser eller portfoliowebbplatser.

Den här rullningslisten använder ett ljuslila spår med en djupare lila tumme som blir mörkare när du håller muspekaren.

Scrolla ner för att se full effekt. Tummen har en radie på 4px för rena rundade kanter.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Snygg lila

En modern lila rullningslist för kreativa projekt

Vanliga frågor

Related Tools

Sass till CSS Converter

Omvandla din Sass-kod till CSS. Snabbt, enkelt och säkert.

Mindre till CSS Converter

Omvandla din Less-kod till CSS. Snabbt, enkelt och säkert.

Skapa perfekta Flexbox-layouter

Visualisera, anpassa och generera CSS flexbox-kod med vårt intuitiva dra-och-släpp-gränssnitt.

CSS till LESS Omvandlare

Förvandla din CSS-kod till LESS med variabler, kapsling och mer. Snabbt, enkelt och säkert.

JSON-förminskning

Minifierad JSON minskar storleken på dina data, vilket innebär att den kan överföras över nätverket snabbare

Momentomvandlare

Konvertera vridmomentsmätningar mellan olika enheter med precision