مولّد تدرجات CSS
مولّد تدرجات CSS يتيح لك إضافة عدة ألوان وضبط مواضعها وزاوية التدرج (للتدرج الخطي) مع معاينة حية فورية، ثم نسخ كود linear-gradient أو radial-gradient الجاهز للاستخدام مباشرة.
أدوات التصميم وCSS يعمل محليًا بالكامل
تتم كل المعالجة داخل جهازك ولا يُرسل أي شيء لأي خادم.
0%
100%
كود CSS
background-image: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
ما الذي تفعله هذه الأداة
تبني تدرّجًا لونيًا خطيًا أو شعاعيًا بألوان تضيفها وزاوية تضبطها، وتعطيك شيفرة CSS جاهزة مع معاينة حيّة.
متى تستخدمها
- خلفية قسم في صفحة تريدها متدرّجة.
- زر أو بطاقة بتدرّج لوني.
- تجرّب تركيبات ألوان قبل اعتمادها.
- تحتاج شيفرة تدرّج دون كتابتها يدويًا.
طريقة الاستخدام
- اختر «خطي» أو «شعاعي».
- اضبط «الزاوية» للتدرّج الخطي.
- أضف الألوان بزر «إضافة لون» واحذف ما لا تريد.
- انسخ «شيفرة CSS».
مثال عملي
المُدخَل
تدرّج خطي بلونين بزاوية مائلة.
الناتج
شيفرة CSS للتدرّج مع معاينة تريه قبل النسخ.
حدود الأداة
- التدرّجات الكثيرة الألوان قد تظهر بتكتّلات لونية على الشاشات محدودة الألوان.
- النص فوق تدرّج يتغير تباينه بتغيّر موضعه؛ افحصه بأداة «فاحص تباين الألوان» عند أفتح وأغمق نقطة.
- الأداة تولّد التدرّج ولا تقترح تركيبات لونية متناغمة — لذلك استخدم أداة «مولّد لوحات الألوان المتناغمة».
الخصوصية والمعالجة
التدرّج يُبنى على جهازك وألوانك لا تُرسل إلى أي مكان.
ملاحظات تقنية
- الشيفرة الناتجة CSS قياسية تعمل في المتصفحات الحديثة دون بادئات.
الأسئلة الشائعة
نعم، يمكنك التبديل بين تدرج خطي (Linear) وتدرج شعاعي (Radial) وضبط زاوية أو مركز التدرج، مع معاينة حية ونسخ كود CSS جاهز.