Бесплатный инструментCreative

Создайте встраиваемый слайдер до и после

Вставьте публичные URL изображений, проверьте предпросмотр, задайте высоту, подписи и начальную позицию, затем скопируйте автономный HTML-код.

Использовать бесплатно

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>

Как использовать

Вставьте URL фото до и после

Настройте высоту, подписи и позицию

Вставьте код на сайт или в CMS

Возможности

Простой HTML для вставки

Создайте HTML-код сравнения изображений до и после для вставки на сайт.

Живой предпросмотр

Без загрузки изображений

Нет. Браузер лишь записывает URL в код. Хостинг изображений должен разрешать публичный показ.

After this task

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

Continue with Magic Eraser

Характеристики

Вход	HTTPS image URLs
Выход	HTML + CSS + JavaScript
Обработка	Client-side

Related Magic Eraser Tools

Magic Eraser Ai Enhance

Частые вопросы

Изображения загружаются?

Нет. Браузер лишь записывает URL в код. Хостинг изображений должен разрешать публичный показ.

Можно изменить код?

Да. HTML, CSS и JavaScript можно настраивать.

Нужно отредактировать фото после?

Очистите фотографию в Magic Eraser, затем создайте здесь сравнение.

Открыть Magic Eraser

More free tools

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

Создавайте красивые градиенты и экспортируйте их в формате CSS или изображений.

Создавайте линейные, радиальные и конические градиенты с несколькими цветовыми точками. Скопируйте код CSS или загрузите изображение в формате PNG. Никакой регистрации не требуется.

Преобразование цветовых кодов между всеми основными форматами

Преобразуйте цвета между именованными форматами HEX, RGB, HSL, HSB, CMYK и CSS. Просмотрите предварительный просмотр в реальном времени, скопируйте любое значение и экспортируйте карту цветов. Никакой регистрации не требуется.

Преобразование HEX-кодов цветов в RGB и обратно.

Преобразуйте цветовые коды HEX в значения RGB и наоборот. Предварительный просмотр в реальном времени, копирование одним щелчком мыши и вывод фрагмента CSS. Регистрация не требуется — работает в вашем браузере.

Извлекайте точные цвета из любого изображения

Выберите любой цвет из загруженного изображения и мгновенно получите его коды HEX, RGB и HSL. Создавайте палитры из фотографий для веб-дизайна, брендинга и иллюстраций.

Извлеките цветовую палитру из любой фотографии

Загрузите фотографию и извлеките 5–10 доминирующих цветов с помощью кодов HEX, RGB и HSL. Копируйте образцы, экспортируйте их как переменные ASE или CSS. Никакой регистрации не требуется.

Создавайте настраиваемые QR-коды для любого контента

Создавайте QR-коды для URL-адресов, текста, учетных данных Wi-Fi и визитных карточек. Настройте цвета, добавьте центральный логотип и загрузите его в формате PNG или SVG. Никакой регистрации не требуется.