Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS में मल्टीपल कलर स्टॉप्स का उपयोग करके लीनियर ग्रेडिएंट्स बनाना


मल्टीपल कलर स्टॉप्स का उपयोग करके लीनियर ग्रेडिएंट बनाने के लिए, कोड निम्नानुसार है -

उदाहरण

<!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    height: 200px;    width: 100%;    display: inline-block;    margin-right: 10px; } .linearGradient {    background-image: linear-gradient(to left, orange, blue,green,pink,yellow); } </style> </head> <body> <h1>Linear Gradient direction using multiple color stops</h1> <div class="linearGradient"></div> </body> </html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

CSS में मल्टीपल कलर स्टॉप्स का उपयोग करके लीनियर ग्रेडिएंट्स बनाना


  1. CSS से रेडियल ग्रेडिएंट्स का आकार सेट करना CSS से रेडियल ग्रेडिएंट्स का आकार सेट करना

    रेडियल ग्रेडिएंट का आकार सेट करने के लिए, radial-gradient() फंक्शन का उपयोग करें। यह फंक्शन रेडियल ग्रेडिएंट को बैकग्राउंड इमेज के रूप में सेट करता है। फंक्शन में दूसरा पैरामीटर उस आकार के रूप में सेट किया जाता है जैसा आप चाहते हैं जैसा नीचे उदाहरण में दिखाया गया है -background-image: radial-gradien

  1. CSS से रेडियल ग्रेडिएंट्स का आकार सेट करना CSS से रेडियल ग्रेडिएंट्स का आकार सेट करना

    रेडियल ग्रेडिएंट का आकार सेट करने के लिए, radial-gradient() फंक्शन का उपयोग करें। यह फंक्शन रेडियल ग्रेडिएंट को बैकग्राउंड इमेज के रूप में सेट करता है। फंक्शन में पहला पैरामीटर उस आकार के रूप में सेट किया जाता है जैसा आप चाहते हैं जैसा नीचे दिखाया गया है -background-image: radial-gradient(ellipse,rg

  1. CSS से लोकेशन कलर स्टॉप्स सेट करना CSS से लोकेशन कलर स्टॉप्स सेट करना

    कलर स्टॉप्स पर लोकेशन को प्रतिशत या निरपेक्ष लंबाई के रूप में सेट किया जा सकता है। उदाहरण के लिए, लीनियर ग्रेडिएंट के लिएbackground-image: linear-gradient(    rgb(61, 255, 2) 40%,    rgb(0, 174, 255) 80%,    rgb(255, 29, 29) 20% );CSS का उपयोग करके लीनियर ग्रेडिएंट में