Công cụ miễn phíCreative

Tạo thanh trượt trước và sau để nhúng

Dán URL ảnh công khai, xem trước, đặt nhãn, chiều cao và vị trí ban đầu, rồi sao chép đoạn mã HTML độc lập.

Sử dụng miễn phí

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>

Cách sử dụng

Dán URL ảnh trước và sau

Chỉnh chiều cao, nhãn và vị trí thanh trượt

Sao chép mã vào trang web hoặc CMS

Tính năng

HTML dễ nhúng

Tạo mã HTML cho thanh trượt so sánh ảnh trước và sau để nhúng vào trang web.

Xem trước trực tiếp

Dán URL ảnh công khai, xem trước, đặt nhãn, chiều cao và vị trí ban đầu, rồi sao chép đoạn mã HTML độc lập.

Không tải ảnh lên

Không. Công cụ chỉ ghi URL vào mã trong trình duyệt; máy chủ lưu ảnh của bạn vẫn phải cho phép hiển thị công khai.

After this task

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

Continue with Magic Eraser

Thông số

Đầu vào	HTTPS image URLs
Đầu ra	HTML + CSS + JavaScript
Xử lý	Client-side

Related Magic Eraser Tools

Magic Eraser Ai Enhance

Câu hỏi thường gặp

Công cụ có tải ảnh lên không?

Không. Công cụ chỉ ghi URL vào mã trong trình duyệt; máy chủ lưu ảnh của bạn vẫn phải cho phép hiển thị công khai.

Tôi có thể sửa mã không?

Có. Mã HTML, CSS và JavaScript thuần có thể được tùy chỉnh.

Cần chỉnh ảnh sau?

Dùng Magic Eraser để làm sạch ảnh, rồi tạo thanh trượt so sánh tại đây.

Mở Magic Eraser

More free tools

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

Thiết kế độ dốc đẹp và xuất dưới dạng CSS hoặc hình ảnh

Thiết kế các gradient tuyến tính, xuyên tâm và hình nón với nhiều điểm dừng màu. Sao chép mã CSS hoặc tải xuống dưới dạng hình ảnh PNG.

Chuyển đổi mã màu giữa mọi định dạng chính

Chuyển đổi màu giữa các định dạng có tên HEX, RGB, HSL, HSB, CMYK và CSS. Xem bản xem trước trực tiếp, sao chép bất kỳ giá trị nào và xuất thẻ màu.

Chuyển đổi mã màu HEX sang RGB và ngược lại

Chuyển đổi mã màu HEX sang giá trị RGB và ngược lại. Xem trước trực tiếp, sao chép bằng một cú nhấp chuột và xuất đoạn mã CSS. - hoạt động trong trình duyệt của bạn.

Trích xuất màu sắc chính xác từ bất kỳ hình ảnh nào

Chọn bất kỳ màu nào từ hình ảnh đã tải lên và nhận mã HEX, RGB và HSL ngay lập tức. Xây dựng bảng màu từ ảnh để thiết kế web, xây dựng thương hiệu và minh họa.

Trích xuất bảng màu từ bất kỳ bức ảnh nào

Tải ảnh lên và trích xuất 5-10 màu chủ đạo bằng mã HEX, RGB và HSL. Sao chép các mẫu màu, xuất dưới dạng biến ASE hoặc CSS.

Tạo mã QR có thể tùy chỉnh cho mọi nội dung

Tạo mã QR cho URL, văn bản, thông tin xác thực WiFi và vCard. Tùy chỉnh màu sắc, thêm logo ở giữa và tải xuống dưới dạng PNG hoặc SVG.