أداة مجانيةCreative

أنشئ شريط قبل وبعد قابلًا للتضمين

ألصق روابط صور عامة، وعاين النتيجة، واضبط الارتفاع والتسميات وموضع البداية، ثم انسخ كود 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>

طريقة الاستخدام

ألصق رابطَي صورتي قبل وبعد

اضبط الارتفاع والتسميات والموضع

ألصق الكود في موقعك أو نظام المحتوى

الميزات

HTML سهل التضمين

أنشئ كود HTML لشريط مقارنة صور قبل وبعد لتضمينه في موقعك.

معاينة مباشرة

ألصق روابط صور عامة، وعاين النتيجة، واضبط الارتفاع والتسميات وموضع البداية، ثم انسخ كود HTML المستقل.

دون رفع الصور

لا. تكتب الأداة الروابط في الكود داخل المتصفح فقط، ويجب أن تسمح استضافة الصور بعرضها للعامة.

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

أسئلة شائعة

هل تُرفع الصور؟

لا. تكتب الأداة الروابط في الكود داخل المتصفح فقط، ويجب أن تسمح استضافة الصور بعرضها للعامة.

هل يمكن تعديل الكود؟

نعم. يمكنك تخصيص 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 والنصوص وبيانات اعتماد WiFi وvCards. قم بتخصيص الألوان وإضافة شعار مركزي وتنزيله بتنسيق PNG أو SVG. لا حاجة للتسجيل.