เครื่องมือฟรีCreative

สร้างสไลเดอร์ก่อนและหลังสำหรับฝังเว็บไซต์

วาง URL ภาพสาธารณะ ดูตัวอย่าง ตั้งค่าความสูง ป้ายกำกับ และตำแหน่งเริ่มต้น แล้วคัดลอก HTML แบบครบในตัว

ใช้ฟรี

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>

วิธีใช้

วาง URL ภาพก่อนและหลัง

ปรับความสูง ป้าย และตำแหน่ง

วางโค้ดในเว็บไซต์หรือ CMS

คุณสมบัติ

HTML ฝังง่าย

สร้างโค้ด HTML สำหรับฝังสไลเดอร์เปรียบเทียบภาพก่อนและหลังบนเว็บไซต์

ตัวอย่างสด

ไม่อัปโหลดภาพ

ไม่มี เครื่องมือเพียงเขียน URL ลงในโค้ดภายในเบราว์เซอร์ โฮสต์ภาพต้องอนุญาตให้แสดงแบบสาธารณะ

After this task

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

Continue with Magic Eraser

ข้อมูลจำเพาะ

อินพุต	HTTPS image URLs
เอาต์พุต	HTML + CSS + JavaScript
การประมวลผล	Client-side

Related Magic Eraser Tools

Magic Eraser Ai Enhance

คำถามที่พบบ่อย

มีการอัปโหลดภาพหรือไม่?

แก้ไขโค้ดได้ไหม?

ได้ คุณปรับแต่ง HTML, CSS และ JavaScript ได้

ต้องแก้ไขภาพหลังหรือไม่?

ใช้ Magic Eraser ล้างภาพ แล้วกลับมาสร้างสไลเดอร์เปรียบเทียบที่นี่

เปิด Magic Eraser

More free tools

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

ออกแบบการไล่ระดับสีที่สวยงามและส่งออกเป็น CSS หรือรูปภาพ

ออกแบบการไล่ระดับสีเชิงเส้น รัศมี และทรงกรวยด้วยการหยุดสีหลายสี คัดลอกโค้ด CSS หรือดาวน์โหลดเป็นรูปภาพ PNG ไม่จำเป็นต้องลงทะเบียน

แปลงรหัสสีระหว่างทุกรูปแบบหลัก

แปลงสีระหว่างรูปแบบชื่อ HEX, RGB, HSL, HSB, CMYK และ CSS ดูตัวอย่างสด คัดลอกค่าใดก็ได้ และส่งออกการ์ดสี ไม่จำเป็นต้องลงทะเบียน

แปลงรหัสสี HEX เป็น RGB และย้อนกลับ

แปลงรหัสสี HEX เป็นค่า RGB และในทางกลับกัน การแสดงตัวอย่างสด การคัดลอกในคลิกเดียว และเอาต์พุตโค้ด CSS ไม่จำเป็นต้องลงทะเบียน — ใช้งานได้ในเบราว์เซอร์ของคุณ

แยกสีที่แน่นอนจากภาพใดๆ

เลือกสีใดก็ได้จากภาพที่อัปโหลดและรับรหัส HEX, RGB และ HSL ทันที สร้างจานสีจากภาพถ่ายสำหรับการออกแบบเว็บ การสร้างแบรนด์ และภาพประกอบ

แยกชุดสีออกจากภาพถ่ายใดๆ

อัปโหลดภาพถ่ายและแยกสีเด่น 5-10 สีด้วยรหัส HEX, RGB และ HSL คัดลอกตัวอย่าง ส่งออกเป็นตัวแปร ASE หรือ CSS ไม่จำเป็นต้องลงทะเบียน

สร้างรหัส QR ที่ปรับแต่งได้สำหรับเนื้อหาใดๆ

สร้างรหัส QR สำหรับ URL ข้อความ ข้อมูลรับรอง WiFi และ vCard ปรับแต่งสี เพิ่มโลโก้ตรงกลาง และดาวน์โหลดเป็น PNG หรือ SVG ไม่จำเป็นต้องลงทะเบียน