نص CSS التدرجي انشئ نصًا مع ملء تدرجي باستخدام CSS background-clip و text-fill-color.

تستخدم تقنية النص المتدرج ثلاث خصائص CSS تعمل معًا. أولاً ، يحدد الخلفية تدرجًا خطيًا على عنصر النص. ثانيًا ، -webkit-background-clip: text (وخلفية background-clip: text القياسية) تقليم الخلفية إلى منطقة محتوى النص فقط. ثالثًا ، يجعل -webkit-text-fill-color: transparent (أو color: transparent) لون النص شفافًا حتى يظهر خلفية التدرج. يمكن للتدرج استخدام أي وظيفة تدرج CSS بما في ذلك linear-gradient و radial-gradient و conic-gradient. Чтобы تعمل التقنية ، يجب أن يكون عنصر النص معروضًا بشكل inline أو inline-block. بادئة Webkit مطلوبة لمتصفح Safari وأقدم إصدارات Chrome. من أجل سهولة الوصول ، تأكد من أن ألوان التدرج توفر تباينًا كافٍ ضد الخلفية. سيستمر قارئ الشاشة في قراءة النص بشكل طبيعي بغض النظر عن التأثير المرئي.