Skip to main content
Penguin ToolsPenguen Araçları

CSS Kaydırma Çubuğu Oluşturucu

Görsel düzenleyiciyle CSS kaydırma çubuğu tasarımını özelleştirin. Renk, genişlik, köşe yarıçapını ayarlayın ve kodu doğrudan kopyalayın.

/* 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;
}

Kaydır içeriği #1 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #2 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #3 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #4 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #5 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #6 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #7 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #8 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #9 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #10 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #11 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #12 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #13 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #14 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #15 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #16 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #17 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #18 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #19 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #20 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #21 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #22 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #23 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #24 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #25 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #26 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #27 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #28 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #29 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Kaydır içeriği #30 - Özel kaydırma çubuğunuzu önizleyin. Çalışırken görmek için kaydırın.

Aracı paylaş
📖

Nasıl Kullanılır

Step 1

Stili Ayarla

Stili Ayarla

Kaydırma çubuğu genişliğini, renklerini, köşe yarıçapını vb. ayarlayın

Step 2

Önizleme

Önizleme

Gerçek zamanlı önizlemede kaydırma çubuğu görünümünü kontrol edin

Step 3

CSS'yi Kopyala

CSS'yi Kopyala

Oluşturulan CSS kodunu kopyalayın

✨

Özellikler

Gerçek Zamanlı Önizleme

Ayarları değiştirirken kaydırma çubuğunu gerçek zamanlı olarak önizleyin

Tarayıcılar Arası Destek

Hem WebKit hem de Firefox için otomatik olarak CSS oluşturun

Üzerine Gelme ve Aktif Durumlar

Üzerine gelme ve sürükleme durumu stillerini ayrı ayrı özelleştirin

❓

FAQ

Evet, ::-webkit-scrollbar (Chrome/Safari/Edge) ve scrollbar-width/scrollbar-color (Firefox) kullanılarak.

🔗İlgili Araçlar

🎨
Tasarım Araçları

Renk Kodu Dönüştürücü

HEX, RGB ve HSL renk kodları arasında dönüştürme yapın. Sezgisel renk seçimi için renk seçici ve gerçek zamanlı önizleme kullanın.

🎨
Tasarım Araçları

Renk Seçici

Renk çarkı ve kaydırıcılar kullanarak renkleri sezgisel olarak seçin. HEX, RGB ve HSL formatlarında renk kodlarını alın ve kopyalayın.

🎨
Tasarım Araçları

Görsel Renk Çıkarıcı

Bir görselden baskın renkleri otomatik olarak tespit edin ve renk paleti oluşturun. Ayrıca tek tek renkler seçmek için görselin herhangi bir yerine tıklayabilirsiniz.

🎯
Tasarım Araçları

Görsel Ortalama Renk Seçici

Tüm bir görselin veya seçili bir alanın ortalama rengini hesaplayın. Renk şemaları veya küçük resim arka plan renkleri seçmek için kullanışlı.

🌈
Tasarım Araçları

CSS Degrade Oluşturucu

Sürükleme kontrolleriyle CSS degradelerini görsel olarak oluşturun. Ön ayarlarla doğrusal, radyal ve konik degrade türlerini destekler.

🔲
Tasarım Araçları

CSS Box Shadow Oluşturucu

Kaydırıcılarla görsel olarak CSS box-shadow oluşturun. Çoklu gölgeler ve iç gölgeleri destekler.