منشئ تدرج CSS

اختر الألوان والزوايا لإنشاء أكواد تدرج CSS مع المعاينة المباشرة

التحديثاتإضافة مولد تدرجات CSS لإنشاء الكود بتحديد الألوان والزواياعرض تحديثات المعلومات

المميزات

تحديث المعاينة والكود معاً

يتغير المظهر و CSS في الوقت ذاته عند تغيير الألوان أو الزوايا

دعم خطي وشعاعي وقطاعي

حدد الزوايا والأشكال ومواضع المراكز بدقة لكل نوع

ضبط 10 ألوان كحد أقصى بالسحب

عدل مواضع الألوان بسحب على الشريط، والشفافية باستخدام المنزلق

8 عينات و إنشاء عشوائي

ابدأ من الألوان المعروفة أو العشوائية ثم قم بالتعديلات الدقيقة

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

اختر النوع

اختر نوع التدرج من خطي أو شعاعي أو قطاعي

حدد الألوان

اختر الألوان من خلال أكواد الألوان أو العينات، أضف ألوناً باستخدام "إضافة لون" وعدّل المواضع والشفافية

اضبط الاتجاه

للخطي: حدد الزاوية أو أزرار الاتجاه، للشعاعي والقطاعي: حدد موضع المركز

انسخ الكود

انقر على زر "نسخ" لنسخ سطر واحد من CSS والصقه في أنماطك

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

إنشاء خلفية صورة بطل الموقع

حدد لون خلفية الرأس أو الزر دون كتابة أكواد

اختيار الألوان لعناوين المدونة

اختر الألوان القريبة من العينات لتنسيق خلفيات عناوين المقالات

طبقة تراكب على الصور

أنشئ طبقة شفافة فوق الصورة باستخدام لون بشفافية منخفضة

ضبط التدرجات متعددة الألوان

عدّل مواضع الحدود بين 3 ألوان أو أكثر بسحب تدريجي

المعرفة الأساسية

الفرق بين linear و radial و conic

يحتوي CSS على 3 دوال تدرج مختلفة في طريقة تغيير الألوان، وتُكتب جميعها في خاصية background.

linear-gradient：linear-gradient هو تدرج خطي يغير اللون على طول خط مستقيم بالزاوية المحددة
radial-gradient：radial-gradient هو تدرج شعاعي يتسع اللون من المركز للخارج بشكل دائري أو بيضوي
conic-gradient：conic-gradient هو تدرج قطاعي يتغير اللون حول المركز في اتجاه عقارب الساعة

المطابقة بين الزوايا و كلمات الاتجاه

زاوية linear-gradient هي 0deg من الأسفل للأعلى، وتزداد الزاوية مع حركة عقارب الساعة. يمكن كتابة الزوايا كأيضاً باستخدام كلمات مثل "to right"، حيث 90deg تساوي "to right" و 180deg تساوي "to bottom"

طريقة كتابة نقاط الألوان والشفافية

نقطة اللون (color stop) هي موضع اللون في التدرج، حيث 0% هي نقطة البداية و 100% هي نهاية. مثلاً "#3B82F6 0%, #8B5CF6 100%" يعني تغيير من الأزرق إلى البنفسجي من البداية للنهاية

صيغة #RRGGBB：صيغة #RRGGBB هي طريقة كتابة الألوان باستخدام رمزين سادسة عشرية لكل من الأحمر والأخضر والأزرق. #FF0000 يعني أحمر معتم
صيغة rgba：صيغة rgba تضيف الشفافية (0-1) إلى قيم الأحمر والأخضر والأزرق (0-255). الشفافية 0.5 تعني اللون نصف شفاف