로그인 편집 시작하기

무료 도구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

After

<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>

사용 방법

1

전후 이미지 URL 붙여 넣기

전후 이미지 URL 붙여 넣기

2

높이, 라벨, 위치 조정

높이, 라벨, 위치 조정

3

웹사이트나 CMS에 코드 붙여 넣기

웹사이트나 CMS에 코드 붙여 넣기

기능

1

간편한 임베드 HTML

웹사이트에 넣을 전후 이미지 비교 슬라이더 HTML 코드를 만드세요.

2

실시간 미리보기

공개 이미지 URL을 붙여 넣고 미리 본 뒤 높이, 라벨, 시작 위치를 설정하고 독립형 HTML 코드를 복사하세요.

3

이미지 업로드 없음

아니요. 브라우저에서 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

자주 묻는 질문

이미지가 업로드되나요?

+

아니요. 브라우저에서 URL만 코드에 기록합니다. 이미지 호스트가 공개 표시를 허용해야 합니다.

코드를 수정할 수 있나요?

+

네. 일반 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 코드를 즉시 가져옵니다. 웹 디자인, 브랜딩 및 일러스트레이션을 위해 사진으로 팔레트를 만듭니다.

모든 사진에서 색상 팔레트를 추출하세요

사진을 업로드하고 HEX, RGB, HSL 코드를 사용하여 5~10가지 주요 색상을 추출하세요. 견본을 복사하고 ASE 또는 CSS 변수로 내보냅니다.

모든 콘텐츠에 대해 맞춤형 QR 코드 생성

URL, 텍스트, WiFi 자격 증명 및 vCard에 대한 QR 코드를 생성합니다. 색상을 사용자 정의하고, 중앙 로고를 추가하고, PNG 또는 SVG로 다운로드하세요.