مولد تدرج CSS
صمّم تدرجات خطية ودائرية بصرياً وانسخ كود CSS الجاهز مباشرة.
كيفية استخدام مولد التدرج
اختر النوع
اختر بين التدرج الخطي (Linear) أو الدائري (Radial).
اختر الألوان
انقر على كل مربع لون لاختيار اللون المطلوب. يمكن إضافة لون وسط.
عدّل الزاوية
حرّك شريط الزاوية لتغيير اتجاه التدرج الخطي من 0 إلى 360 درجة.
انسخ الكود
اضغط "نسخ CSS" وألصق الكود مباشرة في ملف CSS الخاص بك.
عن مولد تدرج CSS
مولد تدرج CSS من Adawix يتيح لك إنشاء تدرجات لونية احترافية باستخدام CSS بدون كتابة كود يدوياً. يدعم التدرج الخطي (linear-gradient) والتدرج الدائري (radial-gradient) مع إمكانية تحديد الزاوية وإضافة ألوان متعددة. النتيجة كود CSS جاهز للصق مباشرة في مشروعك.
التدرجات اللونية عنصر أساسي في تصميم الواجهات الحديثة وتُستخدم في الأزرار والخلفيات والبطاقات. الأداة تُولّد كود متوافقاً مع جميع المتصفحات الحديثة. مجانية بالكامل وتعمل في المتصفح دون إنترنت.
أسئلة شائعة
linear-gradient يُنتج تدرجاً على خط مستقيم بزاوية محددة، بينما radial-gradient يُنتج تدرجاً يتمدد من مركز دائري نحو الخارج.
استخدم ألواناً بصيغة rgba وحدد قيمة alpha أقل من 1، مثل: rgba(255,0,0,0.5) لأحمر نصف شفاف.
نعم، linear-gradient وradial-gradient مدعومان في جميع المتصفحات الحديثة بدون prefix منذ عام 2013.
استخدم زر "إضافة لون" في الأداة، أو في الكود يدوياً أضف ألواناً إضافية: linear-gradient(45deg, #f00, #0f0, #00f).
نعم، كود CSS المولَّد يعمل مع أي عنصر HTML — خلفية الصفحة، الأزرار، البطاقات، الرؤوس وغيرها.