كيفية إنشاء تدرجات CSS

linear-gradient. الأكثر شيوعاً. انتقال لوني على طول خط مستقيم. يمكنك التحكم بالاتجاه (أعلى لأسفل، يسار لليمين، زاوية مخصصة) وإضافة عدد غير محدود من نقاط اللون.

radial-gradient. تشع الألوان من نقطة مركزية للخارج، كدائرة أو قطع ناقص. مثالي لإنشاء تأثيرات الإضاءة والأزرار المتوهجة والخلفيات الدقيقة.

conic-gradient. تدور الألوان حول نقطة مركزية، كقطاعات عجلة الألوان. مثالي للرسوم البيانية الدائرية والمقاييس وتأثيرات قوس قزح.

repeating-linear-gradient / repeating-radial-gradient. نسخ متكررة، مثالية لإنشاء أنماط مخططة أو نسيجية.

ألوان متشابهة. اختر ألواناً متجاورة على عجلة الألوان (أزرق → بنفسجي، برتقالي → أحمر). الانتقالات تكون متناغمة وسلسة بشكل طبيعي.

ألوان متكاملة. ألوان متقابلة على العجلة (أزرق → برتقالي). انتبه: الانتقال المباشر قد يخلق منطقة رمادية في الوسط. أضف لوناً وسيطاً لتجنب ذلك.

أحادي اللون. تنويعات على نفس الدرجة (أزرق فاتح → أزرق غامق). دائماً أنيق ومهني. مثالي للخلفيات الدقيقة.

تجنب الانتقالات المفاجئة. كلما كانت الألوان أبعد على العجلة، كلما احتجت لنقاط وسيطة أكثر لتنعيم الانتقال.

نصيحة احترافية: استخدم فضاء الألوان oklch() لانتقالات موحدة إدراكياً. التدرجات في oklch أكثر طبيعية من RGB.

الخطوة 1: اختر النوع. خطي، شعاعي أو مخروطي. لكل نوع خيارات تخصيص خاصة.

الخطوة 2: حدد ألوانك. استخدم منتقي الألوان لاختيار نقاطك. أضف، احذف أو أعد ترتيب النقاط بنقرة.

الخطوة 3: اضبط الاتجاه والمواقع. غيّر الزاوية ونقطة البداية والموقع الدقيق لكل نقطة للتحكم الكامل.

الخطوة 4: انسخ كود CSS. يتم إنشاء كود CSS في الوقت الحقيقي. انسخه والصقه مباشرة في ملف الأنماط.

معاينة مباشرة وسجل التدرجات واقتراحات لوحات ألوان شائعة مضمنة.

خلفيات الأقسام. تدرج دقيق بين درجتين قريبتين يضيف عمقاً دون تشتيت الانتباه عن المحتوى. الاستخدام الأكثر شيوعاً في تصميم الويب الحديث.

الأزرار والـCTA. التدرج يجعل الأزرار أكثر ديناميكية وجاذبية من اللون المسطح. أضف تغييراً طفيفاً في التدرج عند التمرير لتأثير مُرضٍ.

نص متدرج. مع background-clip: text، يمكنك تطبيق تدرج مباشرة على النص. رائج جداً للعناوين والشعارات.

طبقات فوق الصور. تدرج شبه شفاف فوق صورة يحسّن قراءة النص المتراكب.

حدود. border-image مع تدرج تنشئ حدوداً ملونة مستحيلة مع border-color التقليدي.

تدرجات CSS فعالة. على عكس الصور، هي متجهية (بدون تشوه بكسلي)، خفيفة (بضعة بايتات كود مقابل كيلوبايتات صورة)، ومُعالجة بوحدة GPU.

فضّل CSS على الصور. تدرج CSS دائماً أسرع تحميلاً وأكثر وضوحاً من صورة تدرج. يتكيف أيضاً بشكل طبيعي مع جميع أحجام الشاشات.

حدّ من عدد النقاط. أكثر من 4-5 نقاط يجعل الكود معقداً والمعاينة صعبة. للتدرجات المعقدة جداً، فكّر في SVG.

اختبر على الموبايل. التدرجات قد تبدو مختلفة على شاشات OLED مقابل LCD. اختبر دائماً على أنواع شاشات متعددة.

إمكانية الوصول. تأكد أن النص على خلفية متدرجة يبقى مقروءاً في جميع النقاط. تحقق من تباين WCAG عند كل طرف.