بناء تدرج زر يطابق لوني التمييز الرئيسيين لعلامتك التجارية.
توليد خلفية مؤقتة لبطاقة في انتظار العمل الفني الحقيقي.
نمذجة خلفية صفحة وضبط نقاط التوقف مباشرة قبل تثبيت CSS.
نسخ سلسلة تدرج CSS مباشرة إلى مشروع Tailwind أو CSS-in-JS.
حول مولد تدرج CSS
يُنشئ مولّد التدرجات اللونية CSS تدرجات خطية وشعاعية جميلة مع معاينة حية. ينتج كود CSS جاهزًا للاستخدام يمكنك نسخه مباشرةً في مشاريعك. هذه الأداة المجانية تعمل في متصفحك ولا تخزّن أي بيانات على أي خادم.
الأسئلة الشائعة
كيف أنشئ تدرجًا لونيًا CSS؟
اختر نوع التدرج، حدد الألوان باستخدام منتقي الألوان، واضبط الاتجاه أو الزاوية، وشاهد النتيجة في الوقت الفعلي. عندما تكون راضيًا عن التدرج، انسخ كود CSS المولّد والصقه في ورقة أنماطك.
هل تُحفظ أو تُنقل أي بيانات؟
لا. يُنشأ التدرج بالكامل في متصفحك. لا تُرسل أي ألوان أو تفضيلات أو أكواد CSS إلى أي خادم. يبقى كل شيء على جهازك حتى تنسخ الكود المولّد.
هل يمكنني إنشاء تدرجات بأكثر من لونين؟
نعم، يمكنك إضافة نقاط توقف لونية متعددة لإنشاء تدرجات معقدة متعددة الألوان. يمكنك أيضًا ضبط موضع كل نقطة توقف لونية وزاوية أو اتجاه التدرج لتحقيق التأثير البصري المطلوب بالضبط.
لماذا تكون التدرجات الشعاعية دائمًا دائرية وموسطة؟
تنتج المعاينة الحالية radial-gradient(circle, …) دون شكل أو موقع صريح. يدعم CSS الشكل البيضاوي وإحداثيات مركز مخصصة (radial-gradient(ellipse at 30% 70%, …)) لكن لوحة المعاينة تحتاج إلى عناصر تحكم إضافية لتبقى مقروءة. يمكنك لصق السلسلة المولّدة وتعديل البادئة يدويًا للحالات المتقدمة.
هل يمكنني تصدير التدرج كصورة PNG بدلاً من CSS؟
ليس مباشرة — تنتج الأداة سلاسل CSS، وهو ما تحتاجه للويب. للحصول على PNG ثابت، الصق CSS في عنصر div بحجم 1920×1080 في أدوات المطور بمتصفحك، خذ لقطة شاشة، أو استخدم ملف HTML سريع بنفس التدرج والتقطه. تصدير PNG مدرج ضمن خارطة الطريق.