Herramienta gratisCreative

Crea un slider antes y después para insertar

Pega URL públicas, previsualiza el slider, ajusta altura, etiquetas y posición inicial, y copia el HTML autónomo.

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

Cómo usar

Pega las URL de antes y después

Ajusta altura, etiquetas y posición

Pega el código en tu web o CMS

Funciones

HTML fácil de insertar

Genera código HTML para insertar un comparador de imágenes antes y después en tu web.

Vista previa en vivo

Pega URL públicas, previsualiza el slider, ajusta altura, etiquetas y posición inicial, y copia el HTML autónomo.

Sin subir imágenes

No. El navegador solo escribe sus URL en el código. El alojamiento de imágenes debe permitir mostrarlas públicamente.

After this task

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

Continue with Magic Eraser

Especificaciones

Entrada	HTTPS image URLs
Salida	HTML + CSS + JavaScript
Procesamiento	Client-side

Related Magic Eraser Tools

Magic Eraser Ai Enhance

Preguntas frecuentes

¿Se suben las imágenes?

No. El navegador solo escribe sus URL en el código. El alojamiento de imágenes debe permitir mostrarlas públicamente.

¿Puedo editar el código?

Sí. Puedes personalizar el HTML, CSS y JavaScript.

¿Necesitas editar la imagen final?

Limpia la foto con Magic Eraser y luego crea aquí el comparador.

Abrir Magic Eraser

More free tools

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

Diseñe hermosos degradados y exporte como CSS o imágenes

Diseñe degradados lineales, radiales y cónicos con múltiples paradas de color. Copie el código CSS o descárguelo como una imagen PNG. No es necesario registrarse.

Convierta códigos de color entre todos los formatos principales

Convierta colores entre formatos con nombre HEX, RGB, HSL, HSB, CMYK y CSS. Vea una vista previa en vivo, copie cualquier valor y exporte una tarjeta de color. No es necesario registrarse.

Convierta códigos de color HEX a RGB y viceversa

Convierta códigos de color HEX a valores RGB y viceversa. Vista previa en vivo, copia con un clic y salida de fragmentos de CSS. No es necesario registrarse: funciona en su navegador.

Extrae colores exactos de cualquier imagen.

Elija cualquier color de una imagen cargada y obtenga sus códigos HEX, RGB y HSL al instante. Cree paletas a partir de fotografías para diseño web, marca e ilustración.

Extrae una paleta de colores de cualquier fotografía

Cargue una foto y extraiga de 5 a 10 colores dominantes con códigos HEX, RGB y HSL. Copie muestras, exporte como variables ASE o CSS. No es necesario registrarse.

Genera códigos QR personalizables para cualquier contenido

Genere códigos QR para URL, texto, credenciales WiFi y vCards. Personalice los colores, agregue un logotipo central y descárguelo como PNG o SVG. No es necesario registrarse.