CSS linear-gradient() فنکشن

تعریف و استعمال

CSS linear-gradient() فنکشن سلسلہ رنگ نمائش بنانے کے لئے استعمال کی جاتی ہے جو پس منظر کے طور پر استعمال کی جاتی ہے.

سلسلہ رنگ نمائش بنانے کے لئے، کم از کم دو رنگ نمائش معین کرنا ہوگا. رنگ نمائش وہ رنگ ہیں جس کے درمیان آسان منتقل کئے جانے کا خواہش ہوگا. آپ وہاں سے بھی نقطہ شروع اور سمت (یا زاویہ) نیز سلسلہ رنگ نمائش کا اثر قائم کرسکتے ہیں.

سلسلہ رنگ نمائش مثال:

مثال

مثال 1

یہ سلسلہ رنگ نمائش از بالا شروع ہوتی ہے. وہ از سرخ تا صفرا، وہ سمت کیلا منتقل ہوتی ہے:

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

آزمایش کنید

مثال 2

ایک سلسلہ رنگ نمائش جو سمت چپ سے شروع ہوتا ہے. وہ از سرخ تا کیلا کا منتقل ہوتا ہے:

#grad {
  background-image: linear-gradient(to right, red , blue);
}

آزمایش کنید

مثال 3

ایک سلسلہ رنگ نمائش جو سمت چپ بالا سے شروع ہوتا ہے (اور سمت چپ پائین تک توسیع پذیر ہوتا ہے):

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

آزمایش کنید

مثال 4

ایک درجہ زاویہ مشخص کردہ سلسلہ رنگ نمائش:

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

آزمایش کنید

مثال 5

ایک سلسلہ رنگ نمائش شامل متعدد رنگ نمائش:

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

آزمایش کنید

مثال 6

یک گریدینت خطی با دو مارکر رنگ:

#grad {
  background: linear-gradient(
    to right,
    قرمز 17%,
    نارنجی 17% 34%,
    زرد 34% 51%,
    سبز 51% 68%,
    آبی 68% 84%,
    بنفش 84%
  );
}

آزمایش کنید

مثال 7

یک گریدینت خطی با شفافیت:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

آزمایش کنید

نحوه نوشتن CSS

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این فنکشن هستند.

صفحات مرتبط

درس:CSS گریدینت

مشارکت:سی ایس ایس بیک گراؤنڈ اِگزیبل کی خاصیت

مشارکت:CSS conic-gradient() فنکشن

مشارکت:CSS radial-gradient() فنکشن

مشارکت:CSS repeating-conic-gradient() فنکشن

مشارکت:CSS repeating-linear-gradient() فنکشن

مشارکت:CSS repeating-radial-gradient() فنکشن