CSS Gradient Generator
Create CSS gradients with preview
135°
نقاط الألوان
#3B82F60%
#8B5CF6100%
مخرجات CSS
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
حول هذه الأداة
مولّد التدرجات اللونية CSS ينشئ تدرجات متعددة الألوان سلسة يمكنك لصقها مباشرة في CSS. يدعم التدرجات الخطية (الاتجاهية) والشعاعية (الدائرية) مع أي عدد من نقاط الألوان.
تحدد نقاط الألوان أين يبدأ وينتهي كل لون على طول محور التدرج. يدور شريط الزاوية التدرجات الخطية من 0° إلى 360°.
كيفية الاستخدام
- اختر نوع التدرج: خطي أو شعاعي.
- للتدرجات الخطية، اسحب شريط الزاوية لتحديد الاتجاه.
- انقر على عينة اللون لتغييره واسحب الشريط لضبط الموضع.
- انقر + إضافة نقطة لإضافة المزيد. انقر ✕ للحذف.
- انقر نسخ لنسخ تعريف CSS background.
حالات الاستخدام
يستخدم مصممو الويب تدرجات CSS بدلاً من الصور لخلفيات أقسام الهيرو. تنشئ فرق العلامة التجارية لوحات ألوان تدرجية متوافقة مع إرشادات الألوان المؤسسية. يصمم المطورون نماذج للبطاقات والأزرار وطبقات التراكب.
الأسئلة الشائعة
- ما الفرق بين التدرجات الخطية والشعاعية؟ — ينتقل التدرج الخطي بين الألوان على طول خط مستقيم بزاوية معينة. يشع التدرج الشعاعي الألوان للخارج من نقطة مركزية.
- هل يمكنني استخدام أكثر من لونين؟ — نعم. انقر + إضافة نقطة لإضافة أي عدد من نقاط الألوان.
- هل CSS المنشأ متوافق مع جميع المتصفحات؟ — نعم. الدوال linear-gradient() وradial-gradient() مدعومة بالكامل في جميع المتصفحات الحديثة دون بادئات مورد.