مولد مرشح CSS

وظائف التصفية

ترتيب التسلسل مهم

يطبّق filter: brightness(0.5) saturate(2) السطوع أولاً، ثم التشبع، فيتراكب المرشحان معًا.

يطبّق filter: saturate(2) brightness(0.5) التشبع أولاً. ونظرًا لأن الصورة تكون أكثر سطوعًا قبل تعتيمها، يصبح تشبع اللون أكثر وضوحًا.

الفرق البصري دقيق لكنه حقيقي. جرّب كلا الترتيبين عندما لا تبدو سلسلة المرشحات بالشكل الذي توقعته.

وصفات شائعة

/* مظهر صورة باهتة */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* عتيق / باهت */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* تقريب ثنائي اللون */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* تعتيم الصورة الرئيسية */
filter: brightness(0.6);

/* حالة معطّلة */
filter: grayscale(1) opacity(0.6);

/* طبقة زجاج مصنفر */
filter: blur(12px) saturate(1.3);

مرشح الخلفية للزجاج المصنفر

ينطبق filter على العنصر نفسه؛ ينطبق backdrop-filter على ما يوجد خلف عنصر شبه شفاف - وهو تأثير الزجاج المصنفر الذي شاع على نظام iOS.

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

الدعم: جميع المتصفحات الحديثة؛ أخيرًا يدعمه Firefox بدون علامة في 103+.

ملاحظات الأداء

• يُعد blur() أغلى المرشحات لأنه يتطلب التفاف كل بكسل مع نواة المعالجة. التمويه بمقدار 30 بكسل على صورة رئيسية بدقة 4K يكلّف إطارات فعلية.
• grayscale، sepia، brightness وما شابه ذلك عبارة عن تحويلات ألوان لكل بكسل - رخيصة.
• يتم تسريع المرشحات بواسطة وحدة معالجة الرسومات في المتصفحات الحديثة، ولكن الرسوم المتحركة blur() لا تزال تتعثر على الأجهزة المنخفضة الجودة.
• يفضل will-change: filter قبل الرسوم المتحركة.

filter: drop-shadow() مقابل box-shadow

• يتبع box-shadow مربع حدود العنصر (يتوافق مع border-radius).
• يتبع filter: drop-shadow() وحدات البكسل غير الشفافة للعنصر، مما يعني أنه يتتبع أشكال clip-path وشفافية PNG ومسارات SVG.

بالنسبة للظلال الموجودة على الصور المقطوعة أو الشفافة، استخدم drop-shadow. بالنسبة للبطاقات والصناديق القياسية، يعتبر box-shadow أسرع.