كيف يعمل النص المتدرج في CSS؟

لا تتضمن CSS خاصية باسم «تدرج النص». والحيلة المعتادة هي رسم تدرج لوني كخلفية للعنصر، ثم قص هذه الخلفية لتطابق شكل الأحرف باستخدام background-clip: text، وجعل تعبئة النص شفافة ليظهر التدرج من خلالها.

وصف الأداة

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

تبدو القاعدة المُنشأة كما يلي:

.gradient-text {
  background-image: linear-gradient(135deg, #f97316 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
CSS

يتضمن الناتج الفعلي أيضًا إعدادات الخط وقواعد التفاف النص.

الميزات

  • تدرج خطي بلونين، بزاوية تتراوح من 0 إلى 360 درجة
  • عناصر تحكم لعائلة الخط ووزنه وحجمه
  • معاينة مباشرة يمكنك تصديرها كصورة، بالإضافة إلى CSS جاهزة للنسخ واللصق