ग्रेडिएंट्स दो या अधिक रंगों का संयोजन प्रदर्शित करते हैं। लीनियर ग्रेडिएंट्स का उपयोग दो या अधिक रंगों को लीनियर फॉर्मेट में व्यवस्थित करने के लिए किया जाता है जैसे टॉप टू बॉटम। रेडियल ग्रेडिएंट्स केंद्र पर दिखाई देते हैं।
CSS3 में लीनियर और रेडियल ग्रेडिएंट्स के उपयोग को दिखाने वाला कोड निम्न है -
उदाहरण
<!DOCTYPE html> <html> <head> <style> body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .linearGradient { height: 100px; width: 300px; background-image: linear-gradient(rgb(255, 0, 200), yellow); } .radialGradient { height: 200px; width: 200px; background-image: radial-gradient(rgb(255, 0, 200),yellow); } </style> </head> <body> <h2>Linear Gradient </h2> <div class="linearGradient"></div> <h2>Radial Gradient</h2> <div class="radialGradient"></div> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
