CSS Dalgıç Oluşturucu Özelleştirilebilir dalgılar, yükseklik ve renkler ile SVG dalga bölme çubukları oluşturun.
CSS Dalgıç Oluşturucu
Özelleştirilebilir dalgılar, yükseklik ve renkler ile SVG dalga bölme çubukları oluşturun.
Dalganın özelliklerini yapılandır
Dalga sayısı, yükseklik, renk ve saydamlık ayarlayın.
Bölücüleri önizleyin
İki renklendirilmiş bölüm arasındaki dalgayı görün ve yönünü değiştir.
Kodu kopyalayın
Dalga bölücüsü için HTML ve CSS'yi kopyalayın.
What Is CSS Dalgıç Oluşturucu?
CSS Dalgası Oluşturucu, sayfaların bölümleri arasında pürüzsüz ve organik geçişler için SVG tabanlı dalga bölüm ayırıcıları oluşturur. Dalgalar, modern web tasarımında en popüler bölüm ayırıcı stillerinden biri olup, sert yatay çizgileri akışkan eğrilerle değiştirir. Bu araç, doğal dalga şekilleri oluşturan bezier eğrilerini kullanarak SVG yol öğeleri üretir. Dalga sayısını, genel yüksekliği, dalga rengini, arka plan rengini, opaklığı ve dikey.flip yönünü kontrol edebilirsiniz. Önizleme, dalgayı iki renkli bölüm arasında konumlandırarak içeriği alanlar arasındaki geçişi genau nasıl görebileceğinizi gösterir. Oluşturulan kod, hem SVG işaretlemesini hem de dalga ayırıcısını konumlandırmak ve stillemek için gereken CSS'yi içerir.
Why Use CSS Dalgıç Oluşturucu?
-
Tam özelleştirme için ayarlanabilir dalga sayısı, yükseklik ve renk
-
Üst veya alt bölüm bölücüleri için yön değiştirme düğmesi
-
Gerçekçi görselleştirme için renklendirilmiş bölümler arasındaki önizleme
-
Oluşturulan kod hem SVG hem de konumlandırma CSS içerir
Common Use Cases
Bölüm Bölücüleri
Farklı renkteki sayfa bölümleri arasında pürüzsüz geçişler oluşturun.
Altbilgi Geçişleri
Görsel akış için altbilgi bölümlerinin üstünde dalga bölücüleri ekleyin.
Kahraman Bölüm Sonları
Dalga şekilleriyle kahraman bölümlerinden içeriğe geçin.
Özellik Bölümü Kesintileri
Organik dalga bölücüleri ile özellik bölümlerini ayırın.
Technical Guide
SVG dalgaları, pürüzsüz ve akışkan şekiller oluşturmak için yol öğesiyle kübik bezier eğrisi (C) komutlarını kullanır. SVG viewBox "0 0 100 100" olarak ayarlanır ve preserveAspectRatio="none" ile belirlenen yüksekliği korurken dalgayı tam konteynır genişliğine yaymak üzere kurulur. Dalga şekli, yatay eksen boyunca bezier kontrol noktalarını hesaplayarak oluşturulur ve dikey konumu değiştirerek tepe ve vadileri yaratılır. Dalga sayısı, görünen tam osilasyon sayısını kontrol eder. Yükseklik, dalgaların genliğini kontrol eder. Geçiş etkisi için yol, altta (veya flipped olduğunda üstte) kapatılarak dolu bir şekil oluşturulur. CSS konumlandırması (width: 100%, display: block), SVG'nin tam konteynır genişliğine yayılmasını sağlar. transform: scaleY(-1), dalgayı dikey olarak.flip edebilir.
Tips & Best Practices
-
1Şık ve temiz bölücüler için 2-4 dalga kullanın
-
2Dalga rengini aşağıdaki bölümle eşleştirin untuk sorunsuz geçişler
-
3Katmanlı dalga efektleri için %100'den düşük saydamlık değerlerini kullanın
-
4Derinlik için farklı saydamlıklarda birden fazla dalgayı birleştirin
Related Tools
CSS Kırpma Yolu Oluşturucu
Poligon, daire ve elips önceden ayarlanmış değerleriyle CSS kırpma yolu şekilleri oluşturun.
🎨 CSS & Design
CSS Blob Oluşturucu
Organik blob şekillerini gradient dolguları ve rastgelelik ile SVG olarak oluştur.
🎨 CSS & Design
CSS Bölücü Oluşturucu
Multiple stil seçenekleri ile birlikte gradient, gölge ve zigzag dahil CSS bölüm bölücülerini oluşturun.
🎨 CSS & Design
SVG Desen Jeneratörü
CSS arka planları için çeşitli şekillerle SVG tabanlı tekrar eden desenler oluşturun.
🎨 CSS & DesignFrequently Asked Questions
Q SVG dalgaları yanıt verir mi?
Q Birden fazla dalgayı katmanlayabilir miyim?
Q Dalgayı nasıl tersine çevirebilirim?
Q Dalgayı animasyonlu hale getirebilir miyim?
Q Kaç piksel yükseklik kullanmalıyım?
About This Tool
CSS Dalgıç Oluşturucu is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.