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

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

انقر على زر '+ إضافة نقطة' لإضافة المزيد من نقاط الألوان. يمكن تخصيص كل نقطة بلون محدد (باستخدام منتقي الألوان أو إدخال الهيكساديسيمال) وموضع (0-100%).

للتدرجات الخطية، استخدم شريط الزاوية للتحكم في الاتجاه من 0 إلى 360 درجة. 0° يخلق تدرجاً من الأسفل للأعلى، 90° من اليسار لليمين، 180° من الأعلى للأسفل، 270° من اليمين لليسار.

للتدرجات الشعاعية، 'الدائرة' تخلق تدرجاً دائرياً مثالياً، بينما 'البيضاوي' يخلق تدرجاً بيضاوياً يتطابق مع نسبة أبعاد العنصر.

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

تتضمن الأداة 20 تدرجاً معداً مسبقاً جميلاً مثل الغروب والمحيط والغابة والحلوى والنار والبنفسجي والشفق القطبي وغيرها. فقط انقر على أي زر مسبق لتطبيقه فوراً.

هناك خياران للنسخ: 'نسخ CSS' يوفر قاعدة CSS الكاملة بما في ذلك المحدد، و'نسخ القيمة' يوفر قيمة التدرج فقط لاستخدامها في أي خاصية CSS.

يتطلب التدرج نقطتي لون على الأقل. لن تتمكن من حذف نقطة إذا بقيت نقطتان فقط.

رغم أن التدرجات تُستخدم عادةً للخلفيات، يمكن تطبيقها على خصائص CSS عديدة مثل background-image و border-image وحتى mask-image.

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

نعم، تدرجات CSS مدعومة جيداً في جميع المتصفحات الحديثة مثل Chrome وFirefox وSafari وEdge والمتصفحات المحمولة.

بالطبع! يمكن تحرير كل نقطة لون في أي وقت. تنعكس التغييرات فوراً في المعاينة.