مولّد CSS Filter

ما هو مولّد فلاتر CSS؟

يطبق خاصية CSS filter على صورة في الوقت الفعلي. اجمع blur وbrightness وcontrast وgrayscale ودوران الصبغة وinvert وopacity والإشباع وsepia وdrop-shadow وقارن النتيجة بالأصل وانسخ الكود. يمكنك استخدام الصورة التجريبية المدمجة أو تحميل صورتك التي تبقى على جهازك.

كيفية استخدام مولّد فلاتر CSS

1. اختر إعداداً مسبقاً (أبيض وأسود أو قديم أو دافئ أو بارد أو درامي…) أو ابدأ من بلا.
2. حرّك المنزلقات لكل دالة فلتر.
3. فعّل drop-shadow() واضبط إزاحاته وتمويهه ولونه وشفافيته عند الحاجة.
4. انقر استخدام صورتك للاختبار بملف محلي.
5. انسخ كود CSS.

مثال

blur 2px, brightness 120%, hue-rotate -90°, sepia 50%, drop-shadow on (4px 4px 6px, black at 0.5)

filter: blur(2px) brightness(120%) hue-rotate(-90deg) sepia(50%) drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));

متى تستخدم مولّد فلاتر CSS

استخدمه لتأثيرات تمرير الصور وتنسيق الصور بشكل متسق وخلفيات معتمة وظلال تتبع أشكال PNG/SVG الشفافة (drop-shadow). لا يعدّل ملف الصورة نفسه؛ وللتعديلات الدائمة استخدم محرر صور أو أدوات الصور في الموقع. ولتأثير ما خلف العنصر بدل العنصر نفسه استخدم backdrop-filter (راجع مولّد Glassmorphism).

كيف يعمل مولّد فلاتر CSS

تُكتب فقط الدوال المختلفة عن قيمتها المحايدة (فمثلاً يُحذف brightness عند 100%)، بترتيب ثابت: blur وbrightness وcontrast وgrayscale وhue-rotate وinvert وopacity وsaturate وsepia وdrop-shadow. الترتيب مهم في CSS لأن كل دالة تُطبَّق على مخرج سابقتها. وإذا لم يتغير شيء فالمخرج filter: none;. تُعرض صورتك عبر object URL محلي ولا تُرفع أبداً.

حالات الاستخدام الشائعة

• ✓ تأثيرات تمرير من الرمادي إلى الملون على الشعارات
• ✓ أنماط صور قديمة أو دافئة في المعارض
• ✓ تعتيم صور الواجهة الرئيسية تحت النص
• ✓ ظلال حول أيقونات PNG الشفافة بـ drop-shadow()
• ✓ معاينات سريعة تشبه عمى الألوان بـ hue-rotate

الأسئلة الشائعة

استكشف المزيد من الفئات