Kostenloses ToolCreative

Vorher-Nachher-Slider zum Einbetten erstellen

Füge öffentliche Bild-URLs ein, prüfe die Vorschau, stelle Höhe, Beschriftungen und Startposition ein und kopiere den eigenständigen HTML-Code.

Kostenlos verwenden

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>

Anleitung

Vorher- und Nachher-URLs einfügen

Höhe, Labels und Position anpassen

Code in Website oder CMS einfügen

Funktionen

Einfaches Embed-HTML

Erstelle HTML-Code für einen Vorher-Nachher-Bildvergleich zum Einbetten in deine Website.

Live-Vorschau

Füge öffentliche Bild-URLs ein, prüfe die Vorschau, stelle Höhe, Beschriftungen und Startposition ein und kopiere den eigenständigen HTML-Code.

Kein Bild-Upload

Nein. Das Tool schreibt die URLs nur im Browser in den Code. Der Bildhost muss die öffentliche Anzeige erlauben.

After this task

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

Continue with Magic Eraser

Spezifikationen

Eingabe	HTTPS image URLs
Ausgabe	HTML + CSS + JavaScript
Verarbeitung	Client-side

Related Magic Eraser Tools

Magic Eraser Ai Enhance

Häufige Fragen

Werden Bilder hochgeladen?

Nein. Das Tool schreibt die URLs nur im Browser in den Code. Der Bildhost muss die öffentliche Anzeige erlauben.

Kann ich den Code bearbeiten?

Ja. HTML, CSS und JavaScript lassen sich frei anpassen.

Nachher-Bild noch bearbeiten?

Bereinige dein Foto mit Magic Eraser und erstelle danach hier den Vergleich.

Magic Eraser öffnen

More free tools

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

Entwerfen Sie wunderschöne Farbverläufe und exportieren Sie sie als CSS oder Bilder

Entwerfen Sie lineare, radiale und konische Farbverläufe mit mehreren Farbstopps. Kopieren Sie den CSS-Code oder laden Sie ihn als PNG-Bild herunter.

Konvertieren Sie Farbcodes zwischen allen wichtigen Formaten

Konvertieren Sie Farben zwischen den benannten Formaten HEX, RGB, HSL, HSB, CMYK und CSS. Sehen Sie sich eine Live-Vorschau an, kopieren Sie beliebige Werte und exportieren Sie eine Farbkarte.

Konvertieren Sie HEX-Farbcodes in RGB und zurück

Konvertieren Sie HEX-Farbcodes in RGB-Werte und umgekehrt. Live-Vorschau, Kopieren mit einem Klick und CSS-Snippet-Ausgabe. – funktioniert in Ihrem Browser.

Extrahieren Sie exakte Farben aus jedem Bild

Wählen Sie eine beliebige Farbe aus einem hochgeladenen Bild aus und erhalten Sie sofort die HEX-, RGB- und HSL-Codes. Erstellen Sie Paletten aus Fotos für Webdesign, Branding und Illustration.

Extrahieren Sie eine Farbpalette aus jedem Foto

Laden Sie ein Foto hoch und extrahieren Sie 5–10 dominante Farben mit HEX-, RGB- und HSL-Codes. Kopieren Sie Farbfelder und exportieren Sie sie als ASE- oder CSS-Variablen.

Generieren Sie anpassbare QR-Codes für jeden Inhalt

Generieren Sie QR-Codes für URLs, Text, WLAN-Anmeldeinformationen und vCards. Passen Sie die Farben an, fügen Sie ein Logo in der Mitte hinzu und laden Sie es als PNG oder SVG herunter.