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 background-image 属性

参考：CSS conic-gradient() ఫంక్షన్

参考：CSS radial-gradient() ఫంక్షన్

参考：CSS repeating-conic-gradient() ఫంక్షన్

参考：CSS repeating-linear-gradient() ఫంక్షన్

参考：CSS repeating-radial-gradient() 函数