مولد فلاتر CSS — مجاني على الإنترنت
انشئ تاثيرات فلتر CSS مع معاينة مباشرة.
'/%3E%3Ccircle cx='200' cy='150' r='70' fill='rgba(255,255,255,.25)'/%3E%3C/svg%3E)
Who uses the مولد فلاتر CSS?
- مطورو الواجهة الأمامية الذين يعاينون تركيبات فلاتر الصور قبل تطبيقها على مشروع.
- مصممو واجهات المستخدم الذين يصممون نماذج أولية لمرئيات حالة التحويم وأنماط الألوان في CSS.
- مطورو الويب الذين يستكشفون كيفية تفاعل فلاتر السطوع/التباين/التشبع قبل كتابة CSS النهائي.
How the مولد فلاتر CSS works
تُحمَّل الأداة بصورة تدرج لوني نموذجية مدمجة — لا يوجد خيار رفع صور.
اضبط أشرطة تمرير الفلاتر: السطوع، التباين، التشبع (0–200%)، تدوير التدرج اللوني (0–360°)، الضبابية (0–20px)، تدرج الرمادي، السيبيا، والانعكاس (0–100%).
اجمع بين عدة فلاتر للوصول إلى التأثير المطلوب؛ انقر على Reset لإعادة ضبط جميع أشرطة التمرير إلى القيم الافتراضية.
انسخ خاصية CSS الخاصة بـ filter من لوحة الإخراج لاستخدامها في مشروعك.
Tips & tricks
- لا يوجد رفع للصور — اختبر تركيبات الفلاتر على صورة المعاينة المدمجة قبل نسخ CSS لتطبيقه على صورتك الحقيقية.
- تُحذف تلقائيًا الفلاتر التي تبقى عند قيمتها الافتراضية (سطوع 100%، ضبابية 0، إلخ) من الناتج، مما يجعل CSS المُنتَج مختصرًا.
- لا يتم توفير opacity() وdrop-shadow() كأشرطة تمرير هنا — أضِفهما يدويًا إلى قيمة filter المنسوخة إذا احتجت لذلك.
- انقر على Reset لإعادة ضبط كل شريط تمرير فورًا إلى قيمته الافتراضية والبدء من جديد.
Frequently Asked Questions
ما فلاتر CSS التي تُنتجها هذه الأداة؟
ثمانية فلاتر: brightness()، contrast()، saturate()، hue-rotate()، blur()، grayscale()، sepia()، وinvert(). تُدمج بهذا الترتيب في خاصية filter واحدة، وتُحذف الفلاتر التي تبقى عند قيمتها الافتراضية (بلا تأثير).
هل يمكنني رفع صورتي الخاصة لمعاينة الفلاتر؟
ليس حاليًا — تستخدم المعاينة صورة تدرج لوني ثابتة مدمجة. انسخ CSS الفلتر الناتج وطبّقه على صورتك الخاصة في مشروعك لرؤية التأثير على محتوى حقيقي.
كيف أطبّق فلتر CSS على صورة عند التحويم؟
أضف الفلتر في :hover: .image { filter: none; transition: filter 0.3s; } .image:hover { filter: brightness(1.2) contrast(1.1); } يُنشئ هذا انتقالًا سلسًا للفلتر عند مرور مؤشر الفأرة.
ما الفرق بين فلتري box-shadow وdrop-shadow؟
يُطبَّق box-shadow على صندوق (مستطيل) العنصر. أما فلتر drop-shadow() فيتبع الشكل الفعلي لقناة ألفا في العنصر — مثالي لصور PNG ذات الشفافية بحيث يلتصق الظل بمحيط الصورة. لا تتضمن هذه الأداة عنصر تحكم لـ drop-shadow؛ أضِفه يدويًا إلى CSS المنسوخ عند الحاجة.
هل يمكن تحريك فلاتر CSS بالرسوم المتحركة؟
نعم. يمكن تحريك فلاتر CSS بالانتقالات ورسوم الإطارات الرئيسية: @keyframes pulse { 0% { filter: brightness(1); } 50% { filter: brightness(1.5); } 100% { filter: brightness(1); } }
Is my data safe when using the مولد فلاتر CSS?
Completely safe. The مولد فلاتر CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the مولد فلاتر CSS output in commercial projects?
Yes. The مولد فلاتر CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the مولد فلاتر CSS follow official standards?
Yes. The مولد فلاتر CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.