مولّد التدرج اللوني CSS
أنشئ بسرعة خلفية بتدرج لوني (linear-gradient) لصفحة ويب، مع معاينة فورية وكود CSS جاهز للنسخ — دون فتح Figma أو Photoshop.
كيف يعمل
يتيح التدرج الخطي في CSS (linear-gradient) إنشاء خلفية غنية بصريًا — لافتة، زر، خلفية قسم — دون صورة أو أداة تصميم خارجية. اختر لونين وزاوية، شاهد المعاينة الفورية، ثم انسخ مباشرة خاصية background المولَّدة إلى ورقة الأنماط الخاصة بك. إنها أسرع طريقة لتجربة خلفية متدرجة قبل صقلها في هويتك البصرية.
هل يمكنني استخدام أكثر من لونين في التدرج؟
يتيح CSS ذلك أصلًا (linear-gradient(90deg, #fff, #f00, #00f)، على سبيل المثال)، لكن هذه الأداة تركز عمدًا على تدرج بلونين، وهو حالة الاستخدام الأكثر شيوعًا لخلفية قسم أو زر. للحصول على تدرج أكثر تعقيدًا، يمكنك نسخ النتيجة المولَّدة هنا ثم إضافة نقاط ألوان إضافية مباشرة في CSS الخاص بك.
ما الذي تمثله زاوية التدرج؟
تحدد الزاوية الاتجاه الذي يتقدم فيه التدرج: 0° يذهب من الأسفل إلى الأعلى، و90° من اليسار إلى اليمين، و180° من الأعلى إلى الأسفل، وهكذا. إنها نفس القاعدة المستخدمة أصلًا في دالة CSS linear-gradient()، لذا فإن الكود المنسوخ هنا ينتج بالضبط ما تراه في المعاينة.
معالجة محلية 100%: يتم توليد كود CSS مباشرة داخل متصفحك عبر WebAssembly، دون أي اتصال بخادم خارجي.