مولد تدرجات CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
لماذا تستخدم مولد تدرجات مرئي؟
كتابة تدرجات CSS يدوياً أمر ممل - فتذكر صيغ linear-gradient() و radial-gradient() مع نقاط لون متعددة ومواقع دقيقة عرضة للخطأ. يتيح لك المولد المرئي الخاص بنا إدارة نقاط اللون والمواقع عبر سلايدرات، مع معاينة حية تتحدث فوراً، مما يجعل إنشاء التدرجات عملية سريعة وبديهية.
3 أنواع من التدرجات
دعم كامل للتدرجات الخطية (Linear)، والدائرية (Radial)، والمخروطية (Conic) مع تحكم شامل.
تدرجات متعددة النقاط
أضف عدداً غير محدود من نقاط الألوان واسحب مواقعها لإنشاء تدرجات معقدة واحترافية.
معاينة حية
شاهد التدرج الخاص بك مباشرة أثناء ضبط الألوان والمواقع والزوايا.
كيفية إنشاء تدرج CSS
اختر نوع التدرج
اختر نوع التدرج المفضل واضبط الزاوية أو الاتجاه.
اضبط نقاط الألوان
استخدم منتقي الألوان لضبط كل نقطة، واسحب السلايدر لتحديد موقعها بدقة.
نسخ الكود
انقر على 'نسخ كود CSS' للحصول على خاصية background كاملة جاهزة لموقعك.
حالات استخدام تدرجات CSS
خلفيات الواجهة (Hero)
أنشئ خلفيات مذهلة للواجهة الرئيسية باستخدام تدرجات قطرية أو دائرية.
نصوص متدرجة
طبق التدرجات على النصوص للحصول على تأثيرات بصرية جذابة في العناوين.
حدود متدرجة
استخدم التدرجات لإنشاء حدود ملونة وجذابة للعناصر.
تراكب الصور (Overlay)
ضع تدرجات فوق الصور لجعل النصوص فوقها أكثر وضوحاً وقابلية للقراءة.
أفضل ممارسات تدرجات CSS
✓ استخدم 135 درجة للتدرجات القطرية
تخلق زاوية 135 درجة تدرجاً كلاسيكياً من الأعلى لليسار إلى الأسفل لليمين يبدو طبيعياً وديناميكياً.
✓ اجعل التدرجات ناعمة في واجهات المستخدم
للأزرار والبطاقات، استخدم تدرجات ناعمة جداً من نفس اللون مع اختلاف بسيط في الإضاءة لإضافة عمق دون إزعاج بصري.
✓ وفر لوناً احتياطياً صلباً
أضف دائماً لون خلفية صلب قبل التدرج لضمان ظهور الموقع بشكل جيد في المتصفحات القديمة جداً.
✓ تحريك موقع التدرج
لا يمكن تحريك التدرج مباشرة، ولكن يمكنك تحريك موقع الخلفية (background-position) لخلق تأثير تدفق.
❓ الأسئلة الشائعة
ما الفرق بين التدرج الخطي والدائري والمخروطي؟
الخطية تنتقل في خط مستقيم. الدائرية تنطلق من مركز على شكل دوائر. المخروطية تدور حول نقطة مركزية كأنها رسم بياني دائري.
كيف أنشئ تدرجاً شفافاً؟
استخدم 'transparent' كقيمة لإحدى نقاط اللون. هذا مثالي لإنشاء تراكبات ناعمة على الصور.
لماذا تظهر خطوط واضحة في التدرج (Banding)؟
يحدث هذا في الشاشات ضعيفة الجودة أو عند الانتقال بين ألوان متقاربة جداً. أضف نقطة لون متوسطة لتنعيم الانتقال.
هل يمكن استخدام التدرجات كحدود (Borders)؟
نعم، باستخدام خاصية border-image أو باستخدام عناصر كاذبة (::before) خلف العنصر.