مولد تدرجات CSS
صمّم تدرجات خطية وشعاعية بصريًا، ثم انسخ CSS الجاهز للاستخدام. تتحدث كل العناصر مباشرة في متصفحك.
كيفية إنشاء تدرج CSS
- اختر تدرجًا خطيًا أو شعاعيًا، ثم حدّد الزاوية للتدرج الخطي.
- اختر ألوان نقاطك وحدّد موضع كل منها من 0 إلى 100.
- أضف نقاطًا أو أزلها لتشكيل الانتقال بالطريقة التي تريدها.
- انسخ CSS المُنشأ إلى ورقة الأنماط أو سمة style.
الأسئلة الشائعة
ما التدرج الخطي؟
يمزج التدرج الخطي الألوان على طول خط مستقيم بالزاوية التي تختارها، من 0 إلى 360 درجة.
ما التدرج الشعاعي؟
يمزج التدرج الشعاعي الألوان انطلاقًا من نقطة مركزية إلى الخارج، في شكل دائري أو بيضاوي.
ماذا تعني أرقام المواضع؟
كل موضع هو نسبة مئوية على طول التدرج، من 0% عند البداية إلى 100% عند النهاية. تُرتّب النقاط حسب موضعها تلقائيًا.
هل يعمل التدرج في جميع المتصفحات؟
نعم. يستخدم CSS المُنشأ الدالتين القياسيتين linear-gradient وradial-gradient، المدعومتين في جميع المتصفحات الحديثة.
أدوات ذات صلة
لماذا استخدام مولّد التدرجات؟
استخدم مولّد تدرجات CSS لتصميم انتقالات ألوان سلسة بصريًا بدلًا من تخمين القيم في الكود، وانسخ CSS جاهزًا للإنتاج فورًا.
- شاهد التدرج يتغير مباشرة أثناء ضبط الألوان والزوايا والنقاط.
- انسخ CSS دقيقًا وصحيحًا من دون البحث عن أخطاء الصياغة.
- أنشئ خلفيات متعددة النقاط للأزرار واللافتات والأقسام خلال ثوانٍ.
النصائح والحدود
يمكنك إضافة أي عدد تريده من نقاط الألوان، ويحافظ المولّد على نقطتين على الأقل ليظل التدرج صالحًا دائمًا. تُرتّب النقاط حسب موضعها قبل إنشاء CSS.