CSS Filter Generator

حول هذه الأداة

يتيح لك مولّد فلاتر CSS ضبط تسع دوال فلتر CSS بصرياً — blur وbrightness وcontrast وgrayscale وhue-rotate وinvert وopacity وsaturate وsepia — ورؤية التأثير المشترك في الوقت الفعلي.

تطبق فلاتر CSS تأثيرات مرئية على عناصر HTML مشابهة لبرامج تحرير الصور. إنها مُسرَّعة بواسطة GPU وتعمل على الصور والخلفيات والنصوص.

كيفية الاستخدام

1. اسحب أي شريط تمرير لتطبيق تأثير الفلتر.
2. ادمج فلاتر متعددة — تتحدث المعاينة مباشرة.
3. الفلاتر ذات القيم الافتراضية تُستثنى تلقائياً من النتيجة.
4. انقر إعادة تعيين الكل للعودة إلى الإعدادات الافتراضية.
5. انقر نسخ لنسخ خاصية CSS filter.

حالات الاستخدام

يستخدم المصممون grayscale وsepia لأقسام UI أحادية اللون. يستخدم المطورون blur لخلفيات الزجاج المصفّح. brightness شائع في تأثيرات التمرير. تستخدم تطبيقات الوضع الداكن فلاتر invert.

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

• ما الفرق بين filter وbackdrop-filter؟ — filter يُطبَّق على العنصر نفسه وجميع أبنائه. backdrop-filter يُطبَّق فقط على المنطقة خلف العنصر (مفيد لطبقات الزجاج المصفّح).
• هل يمكن دمج فلاتر متعددة؟ — نعم. سردها مفصولة بمسافات في خاصية filter. تقوم هذه الأداة بذلك تلقائياً.
• هل تؤثر فلاتر CSS على الأداء؟ — الفلاتر البسيطة كـgrayscale وbrightness رخيصة. blur أغلى تكلفةً، خاصة في المساحات الكبيرة — استخدمه باعتدال على الأجهزة المحمولة.