CSS Gradient Generator
Build linear, radial and conic gradients and copy the CSS.
تصميم
مولّد مرشّحات CSS
تمويه وزجاج وتأثيرات مع معاينة وشيفرة.
ما الذي تفعله. مرشّحات CSS تغيّر عرض العنصر — تمويهًا وسطوعًا وتشبّعًا وغيرها. وأما <code>backdrop-filter</code> فلا يؤثر في العنصر بل فيما خلفه، وهو أساس أسطح الزجاج الضبابي.
يعمل في متصفحكلا يتم رفع أي شيءبدون تسجيليعمل دون اتصال
كيفية الاستخدام مولّد مرشّحات CSS
- اختر المرشّحات واضبط قيمها — تتبع المعاينة فورًا.
- بدّل بين filter وbackdrop-filter بحسب ما تريد التأثير فيه.
- انسخ الشيفرة الجاهزة.
filter وbackdrop-filter
الخلط بينهما هو السبب الأشيع في عدم ظهور تأثير الزجاج.
filter يؤثر في العنصر ومحتواه. فالعنصر المموَّه يصبح نصّه مموَّهًا أيضًا.
backdrop-filter يؤثر في كل ما يقع خلف العنصر. فيبقى المحتوى حادًا وتُموَّه الخلفية — وهذا هو تأثير الزجاج.
ولظهوره يجب أن يكون العنصر شبه شفاف. فالعنصر المعتم يحجب خلفيته تمامًا فلا يبقى ما يُموَّه. والمعتاد شفافية من 60 إلى 80% مع تمويه من 8 إلى 16 بكسل.
وملاحظة على وضوح النص: الزجاج يجعل التباين غير ثابت لأن الخلفية تتغيّر. وحيث يقع نص فوقه يلزم أساس معتم كافٍ، وإلا تحقّق شرط التباين أحيانًا وتخلّف أحيانًا — وهذا أشدّ أثرًا في النص العربي لدقّة نقاطه.
ماذا يفعل كل مرشّح؟
يمكن تسلسل عدة مرشّحات، والترتيب يؤثر في النتيجة.
| المرشّح | الأثر | القيمة المعتادة |
|---|---|---|
| blur() | تمويه | من 4 إلى 20 بكسل |
| brightness() | سطوع | من 0.8 إلى 1.2 |
| contrast() | تباين | من 0.9 إلى 1.5 |
| saturate() | تشبّع | من 0 إلى 2 |
| grayscale() | تدرّج رمادي | من 0 إلى 1 |
| hue-rotate() | إزاحة درجة اللون | من 0 إلى 360 درجة |
| drop-shadow() | ظل يتبع الشكل | مثل box-shadow |
وdrop-shadow يختلف عن box-shadow في أنه يتبع الشكل الفعلي لا المستطيل. ومع صورة PNG شفافة أو ملف SVG هو الوسيلة الوحيدة لظل يتبع الحدّ الخارجي.
متى تصبح المرشّحات مشكلة؟
المرشّحات مكلفة حسابيًا، والتمويه أكثرها كلفة.
فـbackdrop-filter يجبر المتصفح على قراءة ما خلف العنصر ومعالجته وإعادة تركيبه، في كل إطار إن كان ما تحته يتحرّك. وعلى هاتف قديم يكون الشريط العلوي الزجاجي المثبّت من أوثق أسباب تقطّع التمرير.
وثلاث قواعد تضبط ذلك: لا تمويه على مساحات كبيرة، ولا قيم مرشّحات متحرّكة، ولا will-change إلا حيث يوجد تحريك فعلي.
واختبر التأثير مع تقليل الشفافية: بعض الأنظمة تتيح تعطيل تأثيرات الشفافية. والواجهة التي تعتمد وضوحها على الزجاج تصبح حينها صعبة الاستعمال.
الأسئلة الشائعة
ما الفرق بين filter وbackdrop-filter؟
filter يؤثر في العنصر ومحتواه، وbackdrop-filter فيما خلفه. وتأثير الزجاج يحتاج الثاني.
لماذا لا أرى تأثير الزجاج؟
لأن العنصر معتم. يحتاج شفافية جزئية وإلا لم يبقَ ما يُموَّه.
متى أستخدم drop-shadow؟
مع PNG الشفافة وSVG. فهو يتبع الشكل، وbox-shadow يتبع المستطيل.
هل تكلّف المرشّحات أداءً؟
نعم، خصوصًا التمويه على مساحات كبيرة والقيم المتحرّكة. يظهر ذلك بوضوح على الأجهزة القديمة.
هل يؤثر ترتيب المرشّحات؟
نعم. تُطبَّق بالتسلسل، وترتيب مختلف يعطي نتيجة مختلفة.
هل يُرفع شيء؟
لا. المعاينة تجري في هذه الصفحة.