مولّد تدرج ألوان CSS

طريقة الاستخدام

1. 1اختر خطيًّا أو دائريًّا أو مخروطيًّا، أو ابدأ من قالب جاهز.
2. 2اسحب المقابض على الشريط، أو عدّل كل نقطة لون وموضعها.
3. 3اضبط الزاوية أو المركز وانسخ كود CSS.
4. 4اختر مقاسًا مثل خلفية الجوال ونزّل التدرج كصورة PNG.

متى تحتاج هذه الأداة؟

• خلفيات واجهات المواقع

  أنشئ تدرجًا خطيًّا ناعمًا خلف عنوان والصق الكود في ملف التنسيق.

• خلفيات الجوال

  نزّل تدرجًا مخروطيًّا أو دائريًّا بمقاس 1080 × 1920 كخلفية بسيطة وفريدة.

• خلفيات وسائل التواصل

  اصنع تدرجًا مربعًا لمنشور إنستغرام وضع عليه نصًّا.

• الأزرار والبطاقات

  استخدم تدرجًا خفيفًا من نقطتين لمنح الزر عمقًا.

نصائح وحدود مهمة

• التدرجات بين لونين شديدي الاختلاف في الإضاءة قد تظهر فيها حزم. أضف نقطة وسطى لتنعيم الانتقال.
• التدرجات المخروطية رائعة لعجلات الألوان والتأثيرات الدائرية. وتدير الزاوية موضع بدء الدوران.
• النص على التدرج يحتاج تباينًا مقروءًا في كل نقطة، فافحص أفتح المناطق وأغمقها.
• تُرسم صورة PNG بالمقاس الذي تختاره بالضبط، حتى 8000 بكسل في كل ضلع.

صمّم تدرج CSS تنسخه أو تنزّله

شروحات خطوة بخطوة

• كيف تختار ألوان موقعك أو مشروعكطريقة عملية لاختيار لوحة ألوان جميلة وتبقى مقروءة.

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