مولد تدرجات CSS

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

يدعم هذا المولد ثلاثة أنواع: linear-gradient (ألوان على طول خط مستقيم)، radial-gradient (ألوان تشع من المركز)، و conic-gradient (ألوان تدور حول نقطة مركزية كوجه الساعة).

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

يمكنك استخدام أي عدد من نقاط اللون حسب الحاجة. تحدد كل نقطة لونًا واختياريًا موضعًا (0% إلى 100%) على طول خط التدرج. تخلق نقاط متعددة انتقالات معقدة.

انسخ كود CSS المُنشأ والصقه كقيمة لخاصية background أو background-image في ورقة أنماط CSS. يعمل الكود في جميع المتصفحات الحديثة.

تحدد نقاط اللون ألوانًا محددة في مواضع على طول خط التدرج. مثلاً "red 0%, blue 50%, green 100%" ينشئ تدرجًا يبدأ بالأحمر ويتحول للأزرق في المنتصف وينتهي بالأخضر.

نعم، تدعم التدرجات الخطية قيم زاوية من 0deg إلى 360deg. يمكنك أيضًا استخدام كلمات اتجاه مثل "to right" و "to bottom" و "to top left".

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

تدرجات CSS عالية الأداء بشكل عام. تلغي طلبات HTTP لملفات الصور ويتم تسريعها بالأجهزة. لكن التدرجات المعقدة جدًا قد تؤثر على الأداء في الأجهزة المنخفضة.

نعم، يمكن استخدام التدرجات لـ background-image و border-image و mask-image وأي خاصية تقبل قيم صور CSS.

جميع المتصفحات الحديثة تدعم تدرجات CSS بما فيها Chrome و Firefox و Safari و Edge و Opera. الدعم ممتاز منذ IE10 ولم تعد البادئات ضرورية.

استخدم repeating-linear-gradient أو repeating-radial-gradient بدلاً من الإصدارات القياسية. تكرر هذه الأنماط نمط التدرج لملء العنصر بأكمله.

لا يمكن تحريك تدرجات CSS مباشرة مع انتقالات CSS. لكن يمكنك تحريك background-position أو background-size أو استخدام خصائص CSS المخصصة مع @property.

نعم، مولد تدرجات CSS هذا مجاني تمامًا. لا يتطلب تسجيلًا ولا توجد حدود استخدام وجميع الأكواد المُنشأة ملكك لاستخدامها في أي مشروع.