Ücretsiz araçCreative

Gömülebilir önce-sonra kaydırıcısı oluşturun

Herkese açık görsel URL’lerini yapıştırın, önizleyin, yükseklik, etiket ve başlangıç konumunu ayarlayıp bağımsız HTML kodunu kopyalayın.

Ücretsiz kullan

Browser tool

Before-after slider embed generator

Paste image URLs and copy a self-contained HTML comparison slider snippet. Nothing is uploaded.

Before image URLAfter image URLEmbed height (px)Initial slider position: 50%Before labelAfter label

Live preview

<div class="me-before-after" style="--position:50%;position:relative;max-width:900px;height:1200px;overflow:hidden;border-radius:16px;background:#111827;">
  <img src="before.jpg" alt="Before" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;">
  <div style="position:absolute;inset:0;width:var(--position);overflow:hidden;">
    <img src="https://magiceraser.pro" alt="After" style="width:calc(10000% / max(var(--position), 1%));height:100%;object-fit:cover;max-width:none;">
  </div>
  <span aria-hidden="true" style="position:absolute;top:0;bottom:0;left:var(--position);width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);"></span>
  <input type="range" min="0" max="100" value="50" aria-label="Compare Before and After" oninput="this.parentElement.style.setProperty('--position',this.value+'%')" style="position:absolute;left:0;right:0;bottom:16px;width:90%;margin:auto;display:block;accent-color:#ff3838;">
</div>

Nasıl kullanılır

Önce ve sonra URL’lerini yapıştırın

Yükseklik, etiket ve konumu ayarlayın

Kodu sitenize veya CMS’e yapıştırın

Özellikler

Kolay gömülen HTML

Sitenize eklemek için önce-sonra görsel karşılaştırma kaydırıcısı HTML kodu oluşturun.

Canlı önizleme

Herkese açık görsel URL’lerini yapıştırın, önizleyin, yükseklik, etiket ve başlangıç konumunu ayarlayıp bağımsız HTML kodunu kopyalayın.

Görsel yükleme yok

Hayır. Tarayıcı yalnızca URL’leri koda yazar. Görsel sunucusu herkese açık gösterime izin vermelidir.

After this task

After this free tool, open Magic Eraser for the next AI editing workflow.

Continue with Magic Eraser

Teknik bilgiler

Girdi	HTTPS image URLs
Çıktı	HTML + CSS + JavaScript
İşleme	Client-side

Related Magic Eraser Tools

Magic Eraser Ai Enhance

Sık sorulanlar

Görseller yükleniyor mu?

Hayır. Tarayıcı yalnızca URL’leri koda yazar. Görsel sunucusu herkese açık gösterime izin vermelidir.

Kodu düzenleyebilir miyim?

Evet. HTML, CSS ve JavaScript özelleştirilebilir.

Son görseli düzenlemeniz mi gerekiyor?

Fotoğrafı Magic Eraser ile temizleyin, ardından karşılaştırmayı burada oluşturun.

Magic Eraser’ı aç

More free tools

Explore our other limited free edits after sign-in photo and image tools.

Güzel degradeler tasarlayın ve CSS veya resim olarak dışa aktarın

Birden çok renk durağıyla doğrusal, radyal ve konik degradeler tasarlayın. CSS kodunu kopyalayın veya PNG görüntüsü olarak indirin. Kayıt olmanıza gerek yok.

Renk kodlarını her ana format arasında dönüştürün

Renkleri HEX, RGB, HSL, HSB, CMYK ve CSS adlı formatlar arasında dönüştürün. Canlı önizlemeyi görün, herhangi bir değeri kopyalayın ve bir renk kartını dışa aktarın. Kayıt olmanıza gerek yok.

HEX renk kodlarını RGB'ye ve geriye dönüştürün

HEX renk kodlarını RGB değerlerine (veya tam tersi) dönüştürün. Canlı önizleme, tek tıklamayla kopyalama ve CSS pasajı çıktısı. Kayıt olmanıza gerek yok; tarayıcınızda çalışır.

Herhangi bir görüntüden tam renkleri çıkarın

Yüklenen bir görüntüden herhangi bir rengi seçin ve HEX, RGB ve HSL kodlarını anında alın. Web tasarımı, markalama ve illüstrasyon için fotoğraflardan paletler oluşturun.

Herhangi bir fotoğraftan renk paleti çıkarın

Bir fotoğraf yükleyin ve HEX, RGB ve HSL kodlarıyla 5-10 baskın rengi çıkarın. Renk örneklerini kopyalayın, ASE veya CSS değişkenleri olarak dışa aktarın. Kayıt olmanıza gerek yok.

Herhangi bir içerik için özelleştirilebilir QR kodları oluşturun

URL'ler, metinler, WiFi kimlik bilgileri ve vCard'lar için QR kodları oluşturun. Renkleri özelleştirin, merkez logosu ekleyin ve PNG veya SVG olarak indirin. Kayıt olmanıza gerek yok.