Alat gratisCreative

Buat slider sebelum-sesudah yang dapat disematkan

Tempel URL gambar publik, lihat pratinjau, atur tinggi, label, dan posisi awal, lalu salin HTML mandiri.

Gunakan gratis

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>

Cara menggunakan

Tempel URL sebelum dan sesudah

Atur tinggi, label, dan posisi

Tempel kode di situs atau CMS

Fitur

HTML mudah disematkan

Buat kode HTML slider perbandingan gambar sebelum dan sesudah untuk disematkan di situs.

Pratinjau langsung

Tempel URL gambar publik, lihat pratinjau, atur tinggi, label, dan posisi awal, lalu salin HTML mandiri.

Tanpa unggah gambar

Tidak. Browser hanya menulis URL ke dalam kode. Host gambar harus mengizinkan tampilan publik.

After this task

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

Continue with Magic Eraser

Spesifikasi

Input	HTTPS image URLs
Output	HTML + CSS + JavaScript
Pemrosesan	Client-side

Related Magic Eraser Tools

Magic Eraser Ai Enhance

Pertanyaan umum

Apakah gambar diunggah?

Tidak. Browser hanya menulis URL ke dalam kode. Host gambar harus mengizinkan tampilan publik.

Bisakah kode diedit?

Ya. HTML, CSS, dan JavaScript dapat disesuaikan.

Perlu mengedit gambar hasil?

Bersihkan foto dengan Magic Eraser, lalu buat slider perbandingan di sini.

Buka Magic Eraser

More free tools

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

Rancang gradien yang indah dan ekspor sebagai CSS atau gambar

Rancang gradien linier, radial, dan kerucut dengan beberapa perhentian warna. Salin kode CSS atau unduh sebagai gambar PNG. Tidak perlu mendaftar.

Konversikan kode warna antara setiap format utama

Konversi warna antara format bernama HEX, RGB, HSL, HSB, CMYK, dan CSS. Lihat pratinjau langsung, salin nilai apa pun, dan ekspor kartu warna. Tidak perlu mendaftar.

Ubah kode warna HEX ke RGB dan sebaliknya

Ubah kode warna HEX menjadi nilai RGB dan sebaliknya. Pratinjau langsung, salinan sekali klik, dan keluaran cuplikan CSS. Tidak perlu mendaftar — berfungsi di browser Anda.

Ekstrak warna yang tepat dari gambar mana pun

Pilih warna apa pun dari gambar yang diunggah dan dapatkan kode HEX, RGB, dan HSL secara instan. Buat palet dari foto untuk desain web, pencitraan merek, dan ilustrasi.

Ekstrak palet warna dari foto mana pun

Upload foto dan ekstrak 5-10 warna dominan dengan kode HEX, RGB, dan HSL. Salin contoh, ekspor sebagai variabel ASE atau CSS. Tidak perlu mendaftar.

Hasilkan kode QR yang dapat disesuaikan untuk konten apa pun

Hasilkan kode QR untuk URL, teks, kredensial WiFi, dan vCard. Sesuaikan warna, tambahkan logo tengah, dan unduh sebagai PNG atau SVG. Tidak perlu mendaftar.