مولد التدرجات اللونية

مولّد تدرجات CSS أونلاين — تدرجات خطية ودائرية ومخروطية مجاناً

مولّد تدرجات CSS من Toolsiro هو أداة مرئية مجانية تتيح لك إنشاء تدرجات CSS جميلة في الوقت الفعلي — خطية ودائرية ومخروطية — مع معاينة مباشرة ونقاط ألوان قابلة للتخصيص وتحكم كامل في الاتجاه ومخرج CSS فوري جاهز للنسخ. لا برنامج تصميم، لا حساب، لا تثبيت.

تدرجات CSS من أقوى الأدوات المرئية في تصميم الويب. تضيف العمق والأبعاد والاهتمام البصري للخلفيات والأزرار والرؤوس والبطاقات وأي عنصر HTML — كل ذلك دون ملف صورة واحد. دعم تدرجات CSS الحديثة شامل عبر جميع المتصفحات، مما يجعل التدرجات اختياراً موثوقاً وعالي الأداء لأي مشروع ويب.

شرح أنواع التدرجات الثلاثة

التدرجات الخطية تُنقِّل الألوان على طول خط مستقيم. يمكن ضبط الاتجاه بأي زاوية — من أعلى إلى أسفل، أو من اليسار لليمين، أو قطرياً، أو أي درجة من 0° إلى 360°. إنها الأكثر استخداماً وتظهر في كل شيء من تأثيرات تحويم الأزرار إلى خلفيات القسم الرئيسي الكاملة. صياغة CSS: linear-gradient(direction, color1, color2, ...).

التدرجات الدائرية تشع للخارج من نقطة مركزية في نمط دائري أو إهليجي. تخلق تأثير نقطة تركيز وتُستخدم بشكل شائع لتأثيرات البقعة الضوئية ومراكز الأزرار المضيئة والتحولات اللونية الدائرية. صياغة CSS: radial-gradient(shape, color1, color2, ...).

التدرجات المخروطية تُدوِّر الألوان حول نقطة مركزية — كدولاب الألوان أو مخطط دائري. إنها مثالية لإنشاء مخططات دائرية بـCSS خالص، ودوالب الألوان، وتأثيرات الدوران، والتحولات اللونية الزاوية. صياغة CSS: conic-gradient(from angle, color1, color2, ...).

نقاط الألوان — لبنات بناء التدرجات

كل تدرج مُعرَّف بنقاط ألوان — نقاط على طول التدرج تحدد لوناً وموضعاً (0% إلى 100%). تدرج بسيط له نقطتان: لون بداية عند 0% ولون نهاية عند 100%. إضافة نقاط أكثر تخلق تدرجات متعددة الألوان حيث يقوم المتصفح بالاستيفاء السلس بين كل زوج متجاور.

التحكم في الموضع يمنحك تحكماً فنياً دقيقاً. بتجميع نقاط الألوان بالقرب من بعضها، تخلق تحولات لونية حادة. بتوزيعها بالتساوي، تحصل على تدرجات سلسة متدفقة. نقطة عند 50% موضوعة بين لونين متطابقين تخلق نطاقاً مسطحاً من ذلك اللون في المنتصف.

التحكم في اتجاه التدرجات الخطية

يُعبَّر عن اتجاه التدرج الخطي إما كاتجاه مفتاحي أو زاوية بالدرجات. توفر الأداة كليهما. أزرار الأسهم الثمانية تغطي الاتجاهات الرئيسية: أعلى وأسفل ويسار ويمين والأربعة قطريات. مدخل الزاوية المخصصة يقبل أي قيمة من 0° إلى 360°، حيث 0° تدرج من أعلى لأسفل، و90° من يسار ليمين.

التدرجات القطرية (45°، 135°، 225°، 315°) شائعة بشكل خاص في تصميم واجهات المستخدم الحديثة لأنها تضيف ديناميكية دون الشعور الصارم للتحولات الأفقية أو الرأسية البحتة.

مخرج CSS

تُخرِج الأداة CSS كاملاً وجاهزاً للإنتاج يمكنك نسخه مباشرةً إلى ورقة الأنماط. يتضمن المخرج صياغة CSS3 القياسية والإصدار المُسبَّق بـ-webkit- لأقصى توافق مع المتصفحات. يمكنك لصق هذا مباشرةً في خاصية background لأي محدد CSS.

مثال: background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

يعمل هذا على أي عنصر — body وdiv وbutton وheader والعناصر الزائفة مثل ::before و::after.

تدرجات جاهزة

تتضمن الأداة 14 تدرجاً جاهزاً تغطي مجموعة من الأساليب: بنفسجي إلى وردي لجماليات SaaS الحديثة، وكهرماني إلى أحمر للتصاميم الدافئة الحيوية، وأخضر إلى أزرق للواجهات النظيفة المنعشة، وتدرجات داكنة عميقة للتصاميم الفاخرة بالوضع الداكن، وتدرجات باستيل للجماليات الهادئة.

انقر على أي تدرج جاهز لتحميله فوراً في الأداة، ثم اضبط النقاط والاتجاه والنوع لتخصيصه لاحتياجاتك المحددة.

استخدام التدرجات في تصميم الويب

خلفيات القسم الرئيسي: خلفيات الصفحة الكاملة بتدرج لوني اتجاه سائد في تصميم الويب الحديث. تخلق عمقاً بصرياً وتوجه العين وتؤسس هوية العلامة التجارية دون تحميل صورة واحدة.

تصميم الأزرار: أزرار التدرج تشعر بملمس أكثر وقابلية للنقر من الأزرار ذات اللون الصلب المسطح. تدرج من اليسار لليمين على زر دعوة للعمل يخلق إحساساً خفياً بالحركة للأمام.

خلفيات البطاقات والأجزاء: التدرجات الخفية المُطبَّقة على البطاقات تضيف عمقاً للتخطيطات التي كانت ستبدو مسطحة. تدرج خفيف جداً — ربما 5-10% فارق في الإضاءة — غالباً يكفي لخلق اهتمام بصري.

تدرجات النص: يمكن تطبيق تدرجات CSS على النص باستخدام -webkit-background-clip: text مع لون نص شفاف. هذا يخلق نصاً ملوناً بتدرج أصبح شائعاً جداً في مواقع تسويق SaaS.

الحدود والأغطية: تدرجات الحدود يمكن إنشاؤها باستخدام تدرج كخلفية على حاوية مع عنصر داخلي صلب. تدرجات غطاء على الصور — تدرج من داكن إلى شفاف فوق صورة فوتوغرافية — تخلق قابلية قراءة مثالية للنص.

أداء تدرجات CSS

تُعرَض تدرجات CSS بواسطة GPU وتكلفة أداء صفرية تقريباً مقارنة بملفات الصور. تُزيل طلبات HTTP ولا تخلق حمل حجم الملف وتتوسع بلا حدود دون فقدان الجودة. استبدال صورة خلفية تدرج بتدرج CSS عادةً يُقلِّل وزن الصفحة بـ10–50 KB ويُزيل طلب شبكة.

أسئلة شائعة

كيف أضيف تدرجاً للنص في CSS؟ طبِّق التدرج كخلفية، ثم أضف -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; لقص التدرج على شكل النص.

هل يمكنني استخدام أكثر من لونين في التدرج؟ نعم — تدعم تدرجات CSS أي عدد من نقاط الألوان. أضف نقاطاً باستخدام زر "+ إضافة نقطة لون" في الأداة.

كيف أصنع تدرجاً بحافة حادة (بدون انتقال)؟ عيِّن نقطتي لون متجاورتين في نفس الموضع — مثلاً red 50%, blue 50% يخلق تحولاً فورياً من الأحمر للأزرق عند علامة 50% بالضبط دون مزج.

هل يمكن تحريك تدرج CSS؟ لا يمكن لـCSS تحريك قيم ألوان التدرج بشكل سلس مباشرة. الأسلوب الشائع استخدام تدرج كبير (background-size: 400% 400%) وتحريك background-position، مما يخلق وهم تدرج متحرك.