ما هو مولّد التدرجات؟

أداة بصرية لبناء تدرجات CSS تتيح لك إنشاء تدرجات خطية ودائرية ومخروطية بنقاط ألوان غير محدودة. اضبط الزوايا والمواضع والألوان فورياً وانسخ CSS بنقرة واحدة.

اختر بين التدرّجات الخطية والشعاعية والمخروطية، واضبط الزاوية من 0° إلى 360°، وأضِف ما تشاء من نقاط الألوان مع شفافية مستقلة لكل نقطة لعمل طبقات شفافة. ابدأ من إعداد جاهز منسّق مثل غروب أو Instagram أو محيط، ثم اضبط الألوان. في التدرّج الشعاعي يمكنك اختيار شكل دائري أو بيضاوي وكلمة مفتاحية للامتداد، وتبديل المزج إلى OKLab أو OKLCH للحصول على انتقال حديث أنعم، أو تطبيق منحنى تخفيف. فعّل «تحريك» لتحصل على حلقة ‎@keyframes‎ جاهزة للّصق وتصنع خلفية متحركة. الناتج هو CSS صِرف تضعه مباشرة في ورقة أنماط أو إعداد Tailwind أو أداة التصميم.

كيفية الاستخدام

1. الخطوة 1 — اختر نوع التدرج (خطي أو دائري أو مخروطي) وحدد الاتجاه أو الزاوية باستخدام شريط تمرير الزاوية أو الأزرار المحددة مسبقاً.
2. الخطوة 2 — أضف نقاط ألوان بالنقر على شريط التدرج. اضبط لون كل نقطة وموضعها بالسحب أو بإدخال قيم دقيقة.
3. الخطوة 3 — شاهد معاينة التدرج مباشرةً، ثم انسخ كود CSS المُنشأ إلى الحافظة أو نزّله كملف CSS.

متى تستخدم

• تصميم خلفيات الواجهة الرئيسية والأزرار وبطاقات المحتوى دون فتح فوتوشوب.
• توحيد ألوان الهوية البصرية في الموقع والبريد والعروض التقديمية.
• تجربة تأثير CSS قبل تسليم المواصفات للمطوّر.

النتيجة

لنفترض أنك تريد خلفية رئيسية بألوان الغروب. اختر تدرجاً خطياً بزاوية 135°، عيّن برتقالي عند 0% ووردي عند 50% وبنفسجي عند 100%، ثم انسخ CSS إلى ورقة الأنماط.

الأسئلة الشائعة

ما الفرق بين التدرّج الخطي والشعاعي والمخروطي؟

الخطي يمرّر الألوان على خط مستقيم بالزاوية المحددة. الشعاعي ينشرها من نقطة مركزية للخارج كأنها أشعة شمس. المخروطي يجعلها تدور حول مركز دائري، مفيد للمخططات الدائرية وعجلات الألوان.

كم نقطة لون يمكنني إضافتها؟

لا يوجد حد صارم. معظم التصاميم تستخدم من نقطتين إلى أربع. بعد خمس أو ست نقاط يبدأ التدرّج بالاتساخ بصرياً لأن الألوان تختلط ببعضها وتفقد حدّتها.

لماذا تظهر أشرطة في التدرّج على خلفية داكنة؟

تظهر الحزم عندما تتقارب الألوان المتجاورة في السطوع. كبّر التباين بين النقاط، أو بدّل مزج الألوان إلى OKLCH أو OKLab للحصول على استيفاء إدراكي أكثر سلاسة، أو أضف طبقة ضوضاء خفيفة بـ CSS.

هل يمكنني استخدام التدرّجات في Figma أو Sketch؟

كود CSS نفسه لا يُلصق مباشرة، لكن قيم الألوان والنسب المئوية تتطابق واحدة بواحدة. انسخ قيمة الـ hex والموقع لكل نقطة إلى محرر التدرّجات في أداتك.

ما الذي تفعله الزاوية بالضبط؟

في التدرّج الخطي 0° يشير للأعلى والزاوية تدور باتجاه عقارب الساعة، فـ 90° تعني من اليسار لليمين و180° من الأعلى للأسفل. في المخروطي تحدد الزاوية موقع بداية الدوران على الدائرة.

أدوات ذات صلة