مولد تدرج CSS

اللون الأول:

#ff00cc

اللون الثاني:

#333399

اتجاه التدرج:

كود CSS:

أداة إنشاء التدرج (Gradient) عبر الإنترنت

التدرجات (Gradients) هي إحدى أساليب تصميم واجهة المستخدم (UI) الأكثر جاذبية التي تتيح لك استخدام مزيج ناعم ومستمر من لونين أو أكثر بدلاً من استخدام لون واحد. باستخدام مولد تدرج CSS، لم تعد بحاجة إلى كتابة وتذكر بناء جملة CSS المعقد يدويًا.

ميزات هذه الأداة:

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

الأسئلة المتكررة (FAQ)

ما هو التدرج الخطي (Linear Gradient) في CSS؟ ▼

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

كيف أستخدم الأكواد التي تم إنشاؤها في مشروعي؟ ▼

بعد تحديد الألوان والاتجاه المطلوبين، انقر على زر 'نسخ الكود'. ثم انتقل إلى ملف الأنماط (CSS) لمشروعك والصق الكود المنسوخ كقيمة لخاصية background أو background-image للعلامة HTML المطلوبة (مثل div أو body).