Ferramenta grátisCreative

Crie um slider antes e depois incorporável

Cole URLs públicas, veja a prévia, ajuste altura, rótulos e posição inicial e copie o HTML independente.

Usar grátis

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>

Como usar

Cole as URLs de antes e depois

Ajuste altura, rótulos e posição

Cole o código no site ou CMS

Recursos

HTML fácil de incorporar

Gere código HTML para incorporar uma comparação de imagens antes e depois no seu site.

Prévia ao vivo

Cole URLs públicas, veja a prévia, ajuste altura, rótulos e posição inicial e copie o HTML independente.

Sem envio de imagens

Não. O navegador apenas grava as URLs no código. A hospedagem deve permitir exibição pública.

After this task

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

Continue with Magic Eraser

Especificações

Entrada	HTTPS image URLs
Saída	HTML + CSS + JavaScript
Processamento	Client-side

Related Magic Eraser Tools

Magic Eraser Ai Enhance

Perguntas frequentes

As imagens são enviadas?

Não. O navegador apenas grava as URLs no código. A hospedagem deve permitir exibição pública.

Posso editar o código?

Sim. HTML, CSS e JavaScript podem ser personalizados.

Precisa editar a imagem final?

Limpe a foto com o Magic Eraser e depois crie a comparação aqui.

Abrir Magic Eraser

More free tools

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

Crie lindos gradientes e exporte como CSS ou imagens

Projete gradientes lineares, radiais e cônicos com múltiplas paradas de cores. Copie o código CSS ou baixe como uma imagem PNG. Não é necessária inscrição.

Converta códigos de cores entre todos os principais formatos

Converta cores entre formatos nomeados HEX, RGB, HSL, HSB, CMYK e CSS. Veja uma visualização ao vivo, copie qualquer valor e exporte um cartão colorido. Não é necessária inscrição.

Converta códigos de cores HEX para RGB e vice-versa

Converta códigos de cores HEX em valores RGB e vice-versa. Visualização ao vivo, cópia com um clique e saída de snippet CSS. Não é necessária inscrição – funciona no seu navegador.

Extraia cores exatas de qualquer imagem

Escolha qualquer cor de uma imagem enviada e obtenha seus códigos HEX, RGB e HSL instantaneamente. Crie paletas a partir de fotos para web design, branding e ilustração.

Extraia uma paleta de cores de qualquer fotografia

Carregue uma foto e extraia de 5 a 10 cores dominantes com códigos HEX, RGB e HSL. Copie amostras, exporte como variáveis ASE ou CSS. Não é necessária inscrição.

Gere códigos QR personalizáveis para qualquer conteúdo

Gere códigos QR para URLs, texto, credenciais WiFi e vCards. Personalize cores, adicione um logotipo central e faça download como PNG ou SVG. Não é necessária inscrição.