مولد تدرج CSS
صمّم تدرجات خطية ودائرية بصرياً وانسخ كود CSS الجاهز مباشرة.
كيفية استخدام مولد التدرج
اختر النوع
اختر بين التدرج الخطي (Linear) أو الدائري (Radial).
اختر الألوان
انقر على كل مربع لون لاختيار اللون المطلوب. يمكن إضافة لون وسط.
عدّل الزاوية
حرّك شريط الزاوية لتغيير اتجاه التدرج الخطي من 0 إلى 360 درجة.
انسخ الكود
اضغط "نسخ CSS" وألصق الكود مباشرة في ملف CSS الخاص بك.
عن مولد تدرج CSS
مولد تدرج CSS من Adawix يتيح لك إنشاء تدرجات لونية احترافية باستخدام CSS بدون كتابة كود يدوياً. يدعم التدرج الخطي (linear-gradient) والتدرج الدائري (radial-gradient) مع إمكانية تحديد الزاوية وإضافة ألوان متعددة. النتيجة كود CSS جاهز للصق مباشرة في مشروعك.
التدرجات اللونية عنصر أساسي في تصميم الواجهات الحديثة وتُستخدم في الأزرار والخلفيات والبطاقات. الأداة تُولّد كود متوافقاً مع جميع المتصفحات الحديثة. مجانية بالكامل وتعمل في المتصفح دون إنترنت.
كيف تختار لونين لا يتكسران في المنتصف
أشهر مشكلة في التدرجات: تختار لونين جميلين فيظهر بينهما وسطٌ رمادي باهت. يحدث هذا لأن المتصفح يمزج اللونين رياضياً في فضاء sRGB، والمسار بين الألوان المتقابلة (أزرق إلى أصفر، أحمر إلى أخضر) يمر بمنطقة معتمة. أسهل علاج: اختر لونين متجاورين في عجلة الألوان (أزرق إلى بنفسجي، برتقالي إلى وردي)، أو أضف نقطة لون ثالثة زاهية في المنتصف لتجبر المسار على تجاوز الرمادي.
تحكّم أدق بنقاط التوقف يصنع فرقاً كبيراً: النسب المئوية بعد كل لون تحدد أين يبدأ المزج وأين ينتهي. كرر اللون نفسه بنسبتين (مثل 0% و40%) لتحصل على مساحة لون ثابتة قبل بدء التدرج — حيلة شائعة في تصميم الأزرار والأشرطة العلوية.
التدرجات في الواجهات العربية: الزاوية لا تنعكس وحدها
خلافاً للهوامش والحشوات المنطقية، زوايا التدرج فيزيائية بحتة: 90deg تعني «نحو اليمين» دائماً، سواء كانت صفحتك عربية أم إنجليزية. إن صممت شريطاً يتدرج من لون العلامة التجارية عند بداية القراءة إلى لون أفتح عند نهايتها، فستحتاج نسختين: زاوية للواجهة الإنجليزية ومرآتها للعربية (90deg مقابل 270deg). أبقِ الزاوية في متغير CSS وبدّلها مع اتجاه الصفحة بدل تكرار الكود.
ولماذا التدرج أصلاً بدل صورة خلفية؟ لأنه مجاني الأداء: لا طلب شبكة، وحدة حادة على أي دقة شاشة، ويتغير مع الوضع الليلي بتبديل متغيرات الألوان فقط — أشياء لا توفرها صورة PNG مُصدَّرة من برنامج تصميم.
أسئلة شائعة
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 — خلفية الصفحة، الأزرار، البطاقات، الرؤوس وغيرها.
عند المزج بين لونين متقابلين (كالأزرق والأصفر) يمر المسار الحسابي في فضاء sRGB بمنطقة رمادية. الحل: أضف نقطة لون وسيطة زاهية في المنتصف، أو اختر لونين متجاورين في عجلة الألوان.
لا. زوايا التدرج فيزيائية: 90deg تتجه يميناً دائماً مهما كان اتجاه الصفحة. إن كان تصميمك اتجاهياً فاعكس الزاوية يدوياً لنسخة RTL (مثلاً 90deg تصبح 270deg).