ما هي تدرجات CSS؟

تدرجات CSS هي انتقالات سلسة بين لونين أو أكثر يمكن تطبيقها كخلفيات لعناصر HTML. على عكس الألوان الصلبة، تُنشئ التدرجات عمقًا بصريًا وأبعادًا من خلال دمج الألوان معًا بسلاسة. يتم عرضها بواسطة المتصفح باستخدام حسابات رياضية، مما يعني أنها مستقلة عن الدقة وتظهر حادة على أي حجم شاشة أو كثافة بكسل.

يتم تعريف التدرجات باستخدام دوال CSS التي تحدد نوع التدرج، الألوان المشاركة، وكيفية انتقال تلك الألوان. الأنواع الثلاثة الرئيسية هي التدرجات الخطية (تتدفق الألوان في خط مستقيم)، التدرجات الشعاعية (تتشتت الألوان من نقطة مركزية)، وتدرجات المخروط (تدور الألوان حول نقطة مركزية كعجلة ألوان).

لماذا نستخدم التدرجات في تصميم الويب؟

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

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

وصف الأداة

هذا CSS Gradient Generator يُنشئ خلفيات تدرج جميلة وقابلة للتخصيص مع معاينة فورية وإخراج كود CSS مباشر. أنشئ تدرجات خطية أو شعاعية أو مخروطية مع عدة نقاط لون، وضبط الزوايا والمواضع بدقة، وانسخ كود CSS الجاهز للإنتاج مباشرة إلى مشاريعك.

أمثلة

تدرج خطي بسيط بلونين:

background: linear-gradient(135deg, #ff512f 0%, #f09819 100%);

تدرج شعاعي بثلاثة ألوان:

background: radial-gradient(
  ellipse at center,
  #ffffff 0%,
  #e0e0e0 50%,
  #9e9e9e 100%
);

تدرج مخروطي (تأثير عجلة الألوان):

background: conic-gradient(
  from 0deg at center,
  #ff0000 0%,
  #ff7f00 17%,
  #ffff00 33%,
  #00ff00 50%,
  #0000ff 67%,
  #8b00ff 83%,
  #ff0000 100%
);

تدرج متعدد النقاط بأسلوب السايبر بانك:

background: linear-gradient(
  90deg,
  #f72585 0%,
  #7209b7 33%,
  #3a0ca3 67%,
  #4361ee 100%
);

الميزات

  • ثلاثة أنواع من التدرجات: أنشئ تدرجات خطية، شعاعية، ومخروطية مع خيارات تخصيص كاملة
  • 37 إعدادًا مسبقًا مختارًا: تدرجات مصممة احترافيًا منظمة حسب الموضوع (دافئ، بارد، بنفسجي، أخضر، داكن، زاهي)
  • نقاط لون متعددة: أضف حتى 10 نقاط لون مع تحكم دقيق في الموضع لتدرجات معقدة
  • معاينة فورية: شاهد تغيّر التدرج مباشرةً أثناء تعديل الألوان، الزوايا، والمواضع
  • تصدير CSS بنقرة واحدة: انسخ كود CSS نظيف وجاهز للإنتاج مباشرةً إلى الحافظة

حالات الاستخدام

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