Outil gratuitCreative

Créez un slider avant-après intégrable

Collez des URL d’images publiques, prévisualisez le résultat, réglez la hauteur, les libellés et la position initiale, puis copiez le code HTML autonome.

Utiliser gratuitement

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>

Mode d’emploi

Collez les URL avant et après

Réglez hauteur, libellés et position

Collez le code dans votre site ou CMS

Fonctionnalités

HTML facile à intégrer

Générez le code HTML d’un slider de comparaison avant-après à intégrer sur votre site.

Aperçu en direct

Collez des URL d’images publiques, prévisualisez le résultat, réglez la hauteur, les libellés et la position initiale, puis copiez le code HTML autonome.

Aucun envoi d’image

Non. L’outil inscrit seulement leurs URL dans le code, dans votre navigateur. L’hébergeur doit autoriser leur affichage public.

After this task

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

Continue with Magic Eraser

Caractéristiques

Entrée	HTTPS image URLs
Sortie	HTML + CSS + JavaScript
Traitement	Client-side

Related Magic Eraser Tools

Magic Eraser Ai Enhance

Questions fréquentes

Les images sont-elles envoyées ?

Non. L’outil inscrit seulement leurs URL dans le code, dans votre navigateur. L’hébergeur doit autoriser leur affichage public.

Puis-je modifier le code ?

Oui. Le HTML, le CSS et le JavaScript sont entièrement personnalisables.

Besoin de retoucher l’image après ?

Nettoyez votre photo avec Magic Eraser, puis créez ici le slider de comparaison.

Ouvrir Magic Eraser

More free tools

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

Concevez de superbes dégradés et exportez-les sous forme de CSS ou d'images

Concevez des dégradés linéaires, radiaux et coniques avec plusieurs arrêts de couleur. Copiez le code CSS ou téléchargez-le sous forme d'image PNG.

Convertissez les codes de couleur entre tous les formats majeurs

Convertissez les couleurs entre les formats nommés HEX, RVB, HSL, HSB, CMJN et CSS. Affichez un aperçu en direct, copiez n'importe quelle valeur et exportez une carte de couleurs.

Convertir les codes de couleur HEX en RVB et inversement

Convertissez les codes de couleur HEX en valeurs RVB et vice versa. Aperçu en direct, copie en un clic et sortie d'extrait de code CSS. – fonctionne dans votre navigateur.

Extrayez les couleurs exactes de n’importe quelle image

Choisissez n'importe quelle couleur dans une image téléchargée et obtenez instantanément ses codes HEX, RVB et HSL. Créez des palettes à partir de photos pour la conception Web, la stratégie de marque et l'illustration.

Extraire une palette de couleurs de n'importe quelle photographie

Téléchargez une photo et extrayez 5 à 10 couleurs dominantes avec les codes HEX, RVB et HSL. Copiez des échantillons, exportez-les sous forme de variables ASE ou CSS.

Générez des codes QR personnalisables pour n'importe quel contenu

Générez des codes QR pour les URL, le texte, les informations d'identification WiFi et les vCards. Personnalisez les couleurs, ajoutez un logo central et téléchargez au format PNG ou SVG.