Preview

التي تم إنشاؤها

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

عناصر التحكم

135°
0%
100%

الإعدادات المسبقة

الشائعة أمثلة

استكشف هذه الأمثلة المتدرجة المذهلة واحصل على الإلهام لمشروعك التالي. انقر فوق أي تدرج لتحميله في المولد.

أحمر الخدود

تدرج دافئ مستوحى من غروب الشمس الجميل.

المحيط

تدرج هادئ يستحضر الشعور بالمياه الساحلية.

Fusion

تدرج جديد وحديث يجمع بين النعناع والأزرق السماوي.

حديقة خصبة

تدرج نابض بالحياة يمثل الحبةuty من الطبيعة.

الحلم

تدرج سحري مستوحى من سماء الليل.

الذهبية

تدرج دافئ يلتقط جوهر الشفق.

على وثائق التدرج ما

هي تدرجات CSS؟

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

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

كيفية استخدام التدرجات

بمجرد إنشاء تدرج باستخدام أداتنا ، يمكنك استخدام كود CSS في مشاريعك:

  1. انسخ كود CSS من المولد.
  2. الصقه في ملف CSS الخاص بك ، أو استخدمه مضمنا في عناصر HTML الخاصة بك.
  3. قم بتطبيق التدرج اللوني على أي عنصر باستخدام النصائحbackground property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • أكثر من لونين للحصول على تأثير تدرج أكثر تعقيدا.
  • اضبط مواضع الألوان للتحكم في مكان حدوث الانتقالات.
  • اجمع بين تدرجات متعددة للحصول على تأثيرات أكثر إبداعا.
  • بالنسبة للتدرجات المخروطية ، فإن تغيير المركز يخلق أنماطا مثيرة للاهتمام.
  • احفظ التدرجات المفضلة لديك لاستخدامها لاحقا.

دعم

يتم دعم تدرجات CSS على نطاق واسع في المستعرضات الحديثة. ومع ذلك ، قد لا تقوم المتصفحات القديمة مثل Internet Explorer بعرضها بشكل صحيح. قدم دائما لونا احتياطيا:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

حول هذه الأداة تم

تصميم مولد التدرج CSS الخاص بنا لمساعدة المطورين والمصممين على إنشاء تدرجات جميلة دون عناء. سواء كنت تعمل على موقع ويب أو تطبيق أو ترغب فقط في تجربة الألوان ، فإن هذه الأداة تجعل من السهل إنشاء التدرج المثالي لمشروعك.

Features

واجهة سهلة الاستخدام

لإنشاء التدرجات.

يعمل التصميم

بشكل مثالي على جميع أحجام الشاشات.

ولصق جاهز

احصل على كود CSS نظيف على الفور.

الإعدادات المسبقة المتاحة

ابدأ بتدرجات جميلة محددة مسبقا.

Related Tools

محول Sass إلى CSS

حوّل كود Sass إلى CSS. بسرعة وسهولة وأمان.

محول Stylus إلى CSS

تحويل كود SCSS إلى CSS. سريع وسهل وآمن.

إنشاء تحويلات CSS3 بسهولة

أداة قوية وسهلة الاستخدام لإنشاء تحويلات CSS3 معقدة دون الحاجة إلى كتابة كود. قم بتصور التغييرات في الوقت الفعلي وانسخ كود CSS الذي تم إنشاؤه لاستخدامه في مشاريعك.

محول كفاءة الوقود

تحويل بين وحدات كفاءة الوقود المختلفة بدقة

حاسبة التجزئة SHA3-256

إنشاء تجزئات SHA3-256 بسرعة وسهولة

محول التيار

حوّل التيار الكهربائي بين وحدات مختلفة بدقة وسهولة