Strumento gratuitoCreative

Crea uno slider prima e dopo incorporabile

Incolla URL pubblici, controlla l’anteprima, imposta altezza, etichette e posizione iniziale, quindi copia il codice HTML autonomo.

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

Come si usa

Incolla gli URL prima e dopo

Regola altezza, etichette e posizione

Incolla il codice nel sito o CMS

Funzioni

HTML facile da incorporare

Genera il codice HTML di uno slider prima e dopo da incorporare nel tuo sito.

Anteprima dal vivo

Incolla URL pubblici, controlla l’anteprima, imposta altezza, etichette e posizione iniziale, quindi copia il codice HTML autonomo.

Nessun caricamento

No. Il browser inserisce soltanto gli URL nel codice. L’host deve consentire la visualizzazione pubblica.

After this task

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

Continue with Magic Eraser

Specifiche

Input	HTTPS image URLs
Output	HTML + CSS + JavaScript
Elaborazione	Client-side

Related Magic Eraser Tools

Magic Eraser Ai Enhance

Domande frequenti

Le immagini vengono caricate?

No. Il browser inserisce soltanto gli URL nel codice. L’host deve consentire la visualizzazione pubblica.

Posso modificare il codice?

Sì. HTML, CSS e JavaScript sono personalizzabili.

Devi modificare l’immagine finale?

Ripulisci la foto con Magic Eraser, poi crea qui lo slider di confronto.

Apri Magic Eraser

More free tools

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

Progetta bellissimi gradienti ed esporta come CSS o immagini

Progetta sfumature lineari, radiali e coniche con più interruzioni di colore. Copia il codice CSS o scaricalo come immagine PNG. Non è necessaria alcuna registrazione.

Converti codici colore tra tutti i principali formati

Converti colori tra formati con nome HEX, RGB, HSL, HSB, CMYK e CSS. Visualizza un'anteprima dal vivo, copia qualsiasi valore ed esporta una cartella colori. Non è necessaria alcuna registrazione.

Converti i codici colore HEX in RGB e viceversa

Converti codici colore HEX in valori RGB e viceversa. Anteprima dal vivo, copia con un clic e output di snippet CSS. Non è necessaria alcuna registrazione: funziona nel tuo browser.

Estrai i colori esatti da qualsiasi immagine

Scegli qualsiasi colore da un'immagine caricata e ottieni immediatamente i suoi codici HEX, RGB e HSL. Crea tavolozze da foto per il web design, il branding e l'illustrazione.

Estrai una tavolozza di colori da qualsiasi fotografia

Carica una foto ed estrai 5-10 colori dominanti con codici HEX, RGB e HSL. Copia campioni, esporta come variabili ASE o CSS. Non è necessaria alcuna registrazione.

Genera codici QR personalizzabili per qualsiasi contenuto

Genera codici QR per URL, testo, credenziali WiFi e vCard. Personalizza i colori, aggiungi un logo centrale e scarica come PNG o SVG. Non è necessaria alcuna registrazione.