أدوات الخصوصية المجانيةمولد التدرجات
صمم تدرجات CSS بمعاينة مباشرة وشيفرة جاهزة للنسخ. مجاني.
كيفية الاستخدام
- اختر ألوانك باستخدام منتقيات الألوان — ابدأ بلونين، أو أضف نقاط لون أكثر لمزج أغنى.
- اختر خطيًا لمزج اتجاهي أو شعاعيًا لتوهج ينتشر من نقطة مركز.
- اضبط بدقة الزاوية (للخطي) واسحب مواضع نقاط اللون للتحكم في موضع ذروة كل لون.
- انسخ مقتطف CSS المولّد والصقه في ورقة أنماطك — فهو يعمل في كل المتصفحات الحديثة.
الأسئلة الشائعة
هل هي مجانية فعلًا؟
نعم — كل أداة على هذا الموقع مجانية 100% دون حدود ودون تسجيل ودون علامات مائية.
هل بياناتي خاصة؟
بالتأكيد. تتم كل المعالجة محليًا في متصفحك. لا تُرفع ملفاتك أبدًا إلى أي خادم.
أي شيفرة CSS تولّدها الأداة؟
إعلان قياسي مثل background: linear-gradient(135deg, #667eea 0%, #764ba2 100%). والبنية هي CSS حديثة خالصة — دون حاجة إلى بادئات مورّدين — وهي تعمل أيضًا كقيمة background-image يمكنك وضعها مع خلفيات أخرى.
هل يمكنني استخدام أكثر من لونين؟
نعم. أضف نقاط لون إضافية لبناء تدرجات متعددة الألوان — غروب أو أعماق محيط أو تأثيرات قوس قزح. وتحصل كل نقطة على لونها ونسبتها الموضعية الخاصة، مما يمنحك تحكمًا كاملًا في المزج.
ما الفرق بين التدرجات الخطية والشعاعية؟
تمزج التدرجات الخطية الألوان على خط مستقيم بزاوية تختارها (0° = من الأسفل إلى الأعلى، 90° = من اليسار إلى اليمين). وتمزج التدرجات الشعاعية للخارج من نقطة مركز في دائرة أو قطع ناقص — مثالية للتوهجات والظلال المحيطة وتأثيرات الأضواء.
هل سيبدو التدرج نفسه في كل متصفح؟
نعم. فبنية التدرج القياسية مدعومة بشكل مطابق من Chrome وFirefox وSafari وEdge. وقد تختلف الألوان قليلًا بين الشاشات بسبب معايرة العرض، لكن CSS نفسها تُعرض باتساق.
مولّد التدرجات — الدليل الكامل
الألوان المسطحة آمنة؛ والتدرجات لا تُنسى. فمن شعارات تطبيقات أيقونية إلى مواقع حائزة على جوائز، تحدد مزجات الألوان الناعمة التصميم الرقمي الحديث. ويتيح لك مولّد التدرجات هذا تكوين تدرجات خطية وشعاعية بصريًا ويصدّر CSS نظيفة جاهزة للنسخ — دون حاجة إلى برمجيات تصميم.
تمهيد سريع في نظرية الألوان
تعمل التدرجات أفضل مع ألوان تشترك في علاقة. فالألوان المماثلة (الجيران على عجلة الألوان، مثل الأزرق إلى البنفسجي) تمتزج بسلاسة وتبدو هادئة. والألوان المتكاملة (الأضداد، مثل البرتقالي إلى الأزرق) تخلق طاقة نابضة لكنها قد تصبح موحلة في المنتصف — أضف نقطة وسط للتحكم في الانتقال. ولتراكبات النصوص، أبقِ التدرجات خفيفة وداكنة بما يكفي ليبقى النص الأبيض مقروءًا.
أين تتألق التدرجات
أقسام الأبطال: خلفية تدرج بعرض كامل ترفع صفحة هبوط فورًا. الأزرار وأزرار الحث: أزرار التدرج تجذب العين دون صراخ. تراكبات الصور: تدرج داكن يتلاشى لأعلى يجعل نص العناوين الأبيض مقروءًا فوق أي صورة. البطاقات والفواصل: قواعد وحدود تدرج رفيعة تضيف صقلًا. الوضع الداكن: تدرجات خفيفة تمنع الأسطح الداكنة المسطحة من أن تبدو بلا حياة.
تقنيات احترافية
استخدم نقاطًا صلبة (نقطتين عند النسبة نفسها) لتأثيرات مخططة أو ثنائية اللون حادة بدلًا من مزجات ناعمة. ضع طبقة تدرج شبه شفاف فوق صورة خلفية للعمق. وحرّك التدرجات بخفة بتحولات موضع الخلفية لواجهات حية متنفسة — لكن أبقِ الحركة لطيفة احترامًا للمستخدمين ذوي الحساسيات الدهليزية. وتحقق دائمًا من نسب التباين: فالتدرجات الزخرفية مقبولة، لكن النص الجالس على تدرج يجب أن يفي مع ذلك بمعايير إمكانية الوصول.
الأداء وأفضل الممارسات
تدرجات CSS مستقلة عن الدقة وعادة أخف من صور الخلفيات — مكسب كبير لسرعة الصفحات. فضّل CSS على ملفات PNG للتدرجات حيثما أمكن. وعندما تحتاج إلى التدرج نفسه في أماكن متعددة، خزّنه كخاصية CSS مخصصة (--brand-gradient) حتى يعني تغيير علامة مستقبلي تحرير سطر واحد.
دليل خطوة بخطوة: كيفية إنشاء تدرجات CSS عبر الإنترنت مجانًا (دليل 2026)