Gradient in CSS
I am working as freelancer. I am a experienced full stack web developer. My lovely stack is MERN but I am open for new tech. I love to work with teammates for achieve goals. I love researches to find specific new things.
Background में इमेज की जगह gradient भरना एक जिम्मेदारी भरा काम है। इसमें रंग का चुनाव और फैलाव दोनों निर्धारित करना पड़ता है।
What is Gradient in CSS?
Css में एक रंग का दूसरे रंग में धीरे-धीरे बदलना ही css gradient होता है। इसको वेब फाइल या element के background में लगाया जाता है, बेहतर appearance के लिए।
Use of Gradient in CSS
Css में तीन तरह के Gradient होते हैं-
1. Linear Gradient
इसमें एक colour से दूसरे colour में बदलाव लाइन की तरह होता है। इसके %
body{
`background-image: linear-gradient(red,green,blue);`
`}`
इसके अलावा इसकी दिशा भी दी जाती हैः
to left
to right
to top
to bottom
Syntax:
background-image: linear-gradient(direction,colour1,colour2....);
इसके अलावा repeating बनाने के लिएः
background-image:repeating-linear-gradient(direction,colour1,colour2....);
2. Radial Gradient
यह circle की तरह एक center के चारों ओर फैला रहता है। corner इसका center पर निर्भर नहीं करता है। लेकिन यह और भी shape बना सकता है। By default यह ellipse होता है।
syntax:
background-image:gradial-gradient(shape,colour1,colour2,....);
for repeating gradial-gradient:
background-image:repeating-gradial-gradient(shape,colour1,colour2,....);
इसके अलावा कुछ shape इस प्रकार हैंः
closest-corner
farthest-corner
closest-side
farthest-side
colours को % में भी लिखा जा सकता है।
3. Conic Gradient
यह center से angle बनाते हुए चारों ओर रंग को फैला देता है।
syntax:
background-image: conic-gradient(color1,color2......);
