Creați bare de derulare CSS personalizate

Proiectează bare de derulare frumoase și moderne care se potrivesc cu stilul site-ului tău cu generatorul nostru intuitiv. Nu sunt necesare abilități de codare!

Începeți să personalizați Vezi exemple

Panou de control

8px
0px

Preview

Conținutul de previzualizare a barei de defilare

Aceasta este o zonă demonstrativă pentru bara de derulare personalizată. Ajustați setările din stânga pentru a vedea modificările în timp real.

Feature 1

Bare de derulare complet personalizabile pentru site-uri și aplicații moderne.

Feature 2

Suport pentru mai multe browsere cu prefixare automată pentru diferite browsere.

Exemplu de conținut de text lung: 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.

Mai mult conținut text: 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.

Sfârșitul textului: 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 iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Cod CSS generat

Copiat în clipboard!

Caracteristici puternice

Complet personalizabil

Ajustați fiecare aspect al barei de derulare, inclusiv lățimea, culorile, raza și marginile pentru a se potrivi perfect cu designul site-ului dvs.

Suport pentru mai multe browsere

Generați cod CSS care funcționează în toate browserele moderne, inclusiv Chrome, Firefox, Safari și Edge.

Presetări gata de utilizare

Începeți cu modele profesionale folosind colecția noastră organizată de presetări de bară de derulare pentru o implementare rapidă.

Previzualizare în timp real

Vedeți exact cum va arăta bara de derulare în timp ce faceți ajustări cu panoul nostru interactiv de previzualizare.

Obțineți un cod CSS minim bine formatat, gata să fie integrat în proiectul dvs.

Design receptiv

Creați bare de derulare care se adaptează perfect la diferite dimensiuni de ecran și dispozitive pentru o experiență de utilizator consistentă.

Mod de utilizare

1

Personalizați-vă bara de derulare

Utilizați panoul de control pentru a ajusta lățimea, culorile, raza și alte proprietăți ale barei de defilare până când se potrivește cu viziunea dvs.

2

Copiați CSS-ul generat

După ce sunteți mulțumit de previzualizare, faceți clic pe butonul "Copiați CSS" pentru a copia codul generat în clipboard.

3

Adăugați la proiectul dvs.

Lipiți codul CSS în foaia de stil a proiectului sau utilizați-l în linie. Aplicați clasa oricărui element pentru a vedea bara de defilare personalizată în acțiune.

Exemple de bară de defilare

Exemplu de bară de derulare albastră modernă cu colțuri rotunjite. Perfect pentru site-uri web și aplicații corporative.

Această bară de derulare folosește o pistă albastru deschis cu un deget albastru mai închis care își schimbă culoarea la trecerea cu mouse-ul.

Derulați în jos pentru a vedea efectul complet. Degetul mare are o rază de 5px pentru margini rotunjite netede.

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

Albastru modern

O bară de derulare albastră elegantă, cu margini rotunjite

Exemplu de bară de derulare întunecată subtilă cu stil minimal. Ideal pentru site-uri web cu conținut intens.

Această bară de derulare folosește o pistă gri foarte deschis cu un deget mare gri mediu care se întunecă la trecerea cu mouse-ul.

Derulați în jos pentru a vedea efectul complet. Degetul mare are o rază ușoară de 3px pentru margini moi.

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

Întuneric subtil

O bară de derulare întunecată minimalistă pentru site-urile de conținut

Exemplu de bară de derulare verde vibrant cu stil îndrăzneț. Excelent pentru site-uri web ecologice sau legate de sănătate.

Această bară de derulare folosește o pistă verde deschis cu un deget verde viu care se întunecă la trecerea cu mouse-ul.

Derulați în jos pentru a vedea efectul complet. Degetul mare are o rază de 6px pentru margini rotunjite pronunțate.

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

Verde vibrant

O bară de derulare verde îndrăzneață pentru site-urile cu tematică ecologică

Exemplu de bară de derulare violet elegantă cu design modern. Perfect pentru site-uri creative sau de portofel.

Această bară de derulare folosește o pistă violet deschis cu un deget violet mai intens care se întunecă la trecerea cu mouse-ul.

Derulați în jos pentru a vedea efectul complet. Degetul mare are o rază de 4px pentru margini rotunjite curate.

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

Violet elegant

O bară de derulare mov modernă pentru proiecte creative

Întrebări frecvente

Related Tools

Înfrumusețător CSS

Formatați și înfrumusețați codul CSS cu precizie profesională

Convertor SCSS în CSS

Transformați-vă codul SCSS în CSS. Rapid, ușor și sigur.

Convertor Stylus în CSS

Transformați-vă codul SCSS în CSS. Rapid, ușor și sigur.

Convertiți TSV în JSON fără efort

Transformați-vă datele TSV în format JSON structurat cu un singur clic. Rapid, sigur și complet bazat pe browser.

Conversia textului între diferite cazuri

Transformați-vă cu ușurință textul în diferite stiluri de caz cu instrumentul nostru versatil de conversie a cazurilor.

Piese per convertor

Convertiți cu precizie între părți pe milion (ppm), părți pe miliard (ppb), părți pe trilion (ppt), procent și multe altele