مولد التدرج CSS

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

يتم تشغيل كل شيء في متصفحك من الألوان والإعدادات التي تختارها، لذلك لا يتم تحميل أي شيء ويمكنك نسخ النتيجة واستخدامها دون الاتصال بالإنترنت.

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

كلاهما عبارة عن قيم CSS قياسية، مكتوبة كـ Linear-gradient() وradial-gradient()، وكلاهما يستخدم نفس قائمة التوقفات اللونية، لذا فإن تبديل النوع يحافظ على الألوان ويغير فقط كيفية انتشارها.

كل توقف لوني هو لون يوضع في موضع من 0% إلى 100%. يمتزج التدرج بسلاسة بين نقاط التوقف المجاورة، لذا يتحكم موضع نقطة التوقف في المكان الذي يصل فيه اللون إلى ذروته ومدى سرعة تلاشيه في النقطة التالية.

أضف أي عدد تريده من نقاط التوقف لإنشاء تدرجات متعددة الألوان، أو اسحبها لضبط المزج، أو انقر على الشريط لإسقاط نقطة توقف جديدة في المكان الذي تريده. محطتان هو الحد الأدنى الذي يحتاجه التدرج.

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

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