مولّد CSS filter

كل مولّد CSS filter يتيح لك تكديس blur() و brightness() و contrast() وما شابهها — لكن الغالبية لا تجعل للترتيب تأثيرًا، لأنها تطبق الفلاتر بتسلسل ثابت واحد. هذا المولّد مختلف: سلسلة الفلاتر هنا هي قائمة حقيقية قابلة لإعادة الترتيب مبنية بتقنية السحب والإفلات من HTML5، وإعادة ترتيب دالتين يغيّر البكسلات المعروضة فعليًا، تمامًا كما سيحدث في CSS الإنتاجي. Blur ثم hue-rotate يبدو مختلفًا عن hue-rotate ثم blur، والآن يمكنك معرفة السبب قبل أن تنشره.

ارفع صورتك وستنطبق عليها الدوال التسع القابلة للتسلسل — blur و brightness و contrast و saturate و hue-rotate و sepia و grayscale و invert و drop-shadow — مباشرةً كإعلان `filter` في CSS على عنصر `<img>`، وليس عيّنة محاكاة. أضف دالة من قائمة الاختيار، واسحب صفها للأعلى أو للأسفل لتغيير موقعها في السلسلة، واضبط شريط التمرير، وسيتحدّث كلّ من المعاينة وسطر `filter: ...;` الجاهز للنسخ عند كل إدخال. احذف خطوة بزرها الخاص، في نفس الصف.

سلسلة ثانية أصغر تبني قيمة `backdrop-filter` تُطبق على لوحة تراكب موضوعة فوق المعاينة، لتتمكن من رؤية تأثير الزجاج المعتم — التقنية الكامنة خلف أشرطة التنقل شبه الشفافة وخلفيات النوافذ المنبثقة الحديثة — دون المساس بسلسلة فلتر الصورة الأساسية. تعمل حتى قبل أن ترفع صورة، على الخلفية الملونة للعنصر النائب، مما يتيح لك ضبط تصميم لوحة الزجاج المعتم خلال ثوانٍ.

عندما تبدو المعاينة مناسبة، انسخ كود CSS مباشرةً من صندوق الإخراج، أو صدّر صورة PNG حقيقية: يُمرّر نفس نص الفلتر إلى الخاصية `ctx.filter` لسياق Canvas 2D — التي تستخدم نفس صيغة الخاصية `filter` في CSS — ويحوّل canvas إلى ملف قابل للتحميل باستخدام `canvas.toBlob()`. الصورة المصدرة تطابق المعاينة المباشرة تمامًا، لأنها أنتجت بنفس نص الفلتر الذي يعمل عبر نفس أساسيات التصيير. كل شيء يحدث محليًا في متصفحك؛ لا تُرفع صورتك إلى أي خادم أبدًا.