محول مجاني

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

قم بإنشاء تدرجات CSS بصريًا مع معاينة مباشرة. أنشئ تدرجات خطية وشعاعية ومخروطية مع نقاط لون مخصصة — مجانًا من جانب العميل.

معاينة مباشرة
مخرجات CSS
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
الزاوية (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

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

أنشئ تدرجات خطية وشعاعية جميلة لـ CSS باستخدام محرر مرئي. اختر الألوان، واضبط نقاط التوقف، وقم بتغيير الاتجاه أو الزاوية، وشاهد تحديث المعاينة المباشرة في الوقت الفعلي. انسخ كود CSS الذي تم إنشاؤه - بما في ذلك بادئات البائع للمتصفحات الأقدم - وألصقه مباشرة في ورقة الأنماط الخاصة بك.

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

  1. اختر نوع التدرج: خطي أو شعاعي.
  2. قم بإضافة توقفات لونية عن طريق النقر فوق شريط التدرج واختيار الألوان.
  3. اضبط زاوية التدرج (الخطي) أو الموضع (القطري) باستخدام عناصر التحكم.
  4. انسخ رمز CSS الذي تم إنشاؤه من لوحة الإخراج.

الأسئلة الشائعة

هل تعمل تدرجات CSS في جميع المتصفحات؟
يتم دعم تدرجات CSS الحديثة (التدرج الخطي والتدرج الشعاعي) في جميع المتصفحات الحالية بما في ذلك Chrome وFirefox وSafari وEdge. يمكن للأداة بشكل اختياري إنشاء بادئات -webkit- لإصدارات المتصفح الأقدم.
هل يمكنني إنشاء تدرجات متعددة الألوان؟
نعم. قم بإضافة العديد من نقاط التوقف اللونية حسب حاجتك. يمكنك أيضًا ضبط موضع كل نقطة توقف للتحكم في مكان مزج الألوان. وهذا يسمح بقوس قزح معقد، أو غروب الشمس، أو تدرجات العلامة التجارية المخصصة.
ما الفرق بين التدرجات الخطية والشعاعية؟
تقوم التدرجات الخطية بنقل الألوان على طول خط مستقيم (من الأعلى إلى الأسفل، أو من اليسار إلى اليمين، أو قطريًا، أو أي زاوية). تقوم التدرجات الشعاعية بنقل الألوان إلى الخارج من نقطة مركزية في شكل دائري أو بيضاوي.
هل يمكنني استخدام التدرج كخلفية للنص؟
نعم. استخدم مقطع الخلفية: نص مع -webkit-text-fill-color: شفاف لتطبيق التدرج على النص. يوفر ملف CSS الذي تم إنشاؤه تعريف التدرج اللوني — حيث يمكنك دمجه مع هذه الخصائص للحصول على نص متدرج.