مولّد تدرّجات CSS

محلي — يعمل داخل متصفحك، وتبقى الملفات والمدخلات على جهازكمجاني — مجاني الاستخدام

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

المدخل
0%
100%
شيفرة CSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
يعمل داخل متصفحك، وتبقى الملفات والمدخلات على جهازك

نبذة عن تدرّجات CSS

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

كيف تستخدم مولّد تدرّجات CSS

  1. 1اختر تدرّجًا خطيًا أو شعاعيًا.
  2. 2حدّد زاوية التدرّج الخطي، ثم أضف الألوان واضبط موضع كل نقطة.
  3. 3راجع المعاينة الحيّة وانسخ قاعدة background الناتجة.

أسئلة شائعة

ما نقطة اللون؟
تربط نقطة اللون لونًا بموضع على التدرّج، ثم يمزج المتصفح بين النقاط المتتابعة.
ماذا تتحكم الزاوية؟
تحدد الزاوية اتجاه انتقال الألوان في التدرّج الخطي، ولا تُستخدم في التدرّج الشعاعي.
هل يحتاج تدرّج CSS إلى ملف صورة؟
لا. تطلب شيفرة CSS المنسوخة من المتصفح رسم التدرّج مباشرةً.