पृष्ठभूमि ग्रेडिएंट
समृद्ध दृश्य प्रभावों के लिए bg-gradient-to-* और from-*/via-*/to-* रंग-स्टॉप का उपयोग करके रैखिक ग्रेडिएंट बनाएँ।
पृष्ठभूमि ग्रेडिएंट, CoddyKit पर Tailwind CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Tailwind CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
CSS ग्रेडिएंट का परिचय
ग्रेडिएंट दो या अधिक रंगों के बीच सहज रूप से बदलता है। CSS में रैखिक ग्रेडिएंट सीधी रेखा में आगे बढ़ते हैं, जबकि रेडियल ग्रेडिएंट किसी केंद्रीय बिंदु से चारों ओर फैलते हैं। ग्रेडिएंट दृश्य गहराई जोड़ते हैं, प्रकाश का आभास पैदा करते हैं और पृष्ठों को कम सपाट दिखने में मदद करते हैं। Tailwind, संयोज्य यूटिलिटी क्लासों के समूह से रैखिक ग्रेडिएंट बनाना सरल बनाता है।
bg-gradient-to-* दिशा क्लासें
Tailwind की ग्रेडिएंट दिशा यूटिलिटी दिशासूचक दिशाओं का अनुसरण करती हैं। bg-gradient-to-r बाएँ से दाएँ, bg-gradient-to-b ऊपर से नीचे, और bg-gradient-to-br ऊपर-बाएँ से नीचे-दाएँ जाता है। ये आठ दिशा यूटिलिटी आम तौर पर आवश्यक सभी कोणों को कवर करती हैं। एक को आधार ग्रेडिएंट क्लास के रूप में लागू करें, फिर स्टॉप यूटिलिटी से रंग निर्धारित करें।
<div class="bg-gradient-to-r from-purple-500 to-pink-500 h-16"></div>
<div class="bg-gradient-to-b from-sky-400 to-blue-600 h-16"></div>
<div class="bg-gradient-to-br from-green-400 to-teal-600 h-16"></div>
<div class="bg-gradient-to-tr from-indigo-500 to-sky-500 h-16"></div>from-* और to-* रंग-स्टॉप
from-{color}-{shade} और to-{color}-{shade} का उपयोग करके निर्धारित करें कि ग्रेडिएंट कहाँ से शुरू और कहाँ समाप्त होगा। ग्रेडिएंट एक किनारे पर मौजूद from-* रंग से दूसरे किनारे के to-* रंग तक सहज रूप से बदलता है। दोनों स्टॉप के लिए आप Tailwind के पैलेट का कोई भी रंग उपयोग कर सकते हैं या जीवंत, अलग-अलग रंग-परिवारों वाले ग्रेडिएंट के लिए रंग-परिवारों को मिला सकते हैं।
<!-- Same-family gradient: depth -->
<div class="bg-gradient-to-r from-blue-400 to-blue-700 h-16"></div>
<!-- Cross-family gradient: vivid effect -->
<div class="bg-gradient-to-r from-violet-600 to-pink-600 h-16"></div>
<!-- Neutral to color: subtle fade -->
<div class="bg-gradient-to-b from-white to-gray-100 h-16"></div>via-* मध्यवर्ती स्टॉप जोड़ना
तीन रंगों वाला ग्रेडिएंट बनाने के लिए via-{color}-{shade} से बीच का रंग-स्टॉप जोड़ें। ग्रेडिएंट from-* से होकर via-* तक और फिर to-* तक बदलता है। इससे सूर्यास्त जैसी ग्रेडिएंट और इंद्रधनुषी प्रभाव बनाए जा सकते हैं। पारदर्शी मध्यबिंदु के साथ रोचक धीरे-धीरे दिखाई देने और गायब होने वाला प्रभाव बनाने के लिए आप via-transparent का भी उपयोग कर सकते हैं।
<!-- Three-stop gradient: sunset effect -->
<div class="bg-gradient-to-r from-yellow-400 via-orange-500 to-red-600 h-16"></div>
<!-- Via transparent: fade in and fade out -->
<div class="bg-gradient-to-r from-indigo-600 via-transparent to-indigo-600 h-16"></div>अपारदर्शिता वाले ग्रेडिएंट स्टॉप
अर्ध-पारदर्शी ग्रेडिएंट के लिए ग्रेडिएंट स्टॉप को स्लैश अपारदर्शिता संशोधक के साथ मिलाएँ। from-blue-600/0 to-blue-600 ऐसा ग्रेडिएंट बनाता है जो पूरी तरह पारदर्शी से पूरी तरह अपारदर्शी होता जाता है — यह चित्रों के ऊपर परत बनाने या किनारों पर पीछे की सामग्री दिखाने वाला फ्रॉस्टेड ग्लास प्रभाव बनाने के लिए उपयोगी है।
<!-- Image with gradient overlay for text readability -->
<div class="relative h-64">
<img src="photo.jpg" class="absolute inset-0 w-full h-full object-cover" alt="" />
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-black/0"></div>
<h2 class="absolute bottom-4 left-4 text-white font-bold text-xl">Card Title</h2>
</div>ग्रेडिएंट पृष्ठभूमि वाला हीरो अनुभाग
हेडलाइन पाठ के पीछे दृश्य आकर्षण पैदा करने के लिए ग्रेडिएंट का सबसे अधिक उपयोग हीरो अनुभागों में किया जाता है। सूक्ष्म bg-gradient-to-br from-indigo-50 to-white साफ़-सुथरा, आधुनिक रूप देता है। प्रभावशाली bg-gradient-to-r from-purple-700 to-indigo-700 SaaS अनुप्रयोगों के लिए पूरी चौड़ाई वाला गहरा हीरो बनाता है। मुख्य बात यह है कि ग्रेडिएंट पर पाठ का पर्याप्त कंट्रास्ट सुनिश्चित किया जाए।
<!-- Dark hero with gradient -->
<section class="bg-gradient-to-r from-purple-700 to-indigo-700 px-6 py-24">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-5xl font-extrabold text-white mb-4">Ship Faster</h1>
<p class="text-indigo-200 text-xl">Built with Tailwind CSS.</p>
</div>
</section>कार्ड की ग्रेडिएंट सीमाएँ
तत्वों को एक-दूसरे के भीतर रखकर ग्रेडिएंट सीमा का आभास बनाएँ। बाहरी तत्व की पृष्ठभूमि पर ग्रेडिएंट लागू करें, फिर उसके भीतर सफ़ेद या गहरी पृष्ठभूमि वाला तत्व थोड़े मार्जिन के साथ रखें। बाहरी ग्रेडिएंट पृष्ठभूमि दिखाई देकर सीमा का रूप ले लेती है। इस तकनीक के लिए कस्टम CSS की आवश्यकता नहीं होती और यह सभी ब्राउज़र में भरोसेमंद ढंग से काम करती है।
<div class="p-0.5 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500">
<div class="bg-white rounded-xl p-6">
<h3 class="font-bold text-gray-900">Gradient Border Card</h3>
<p class="text-gray-500 text-sm">Content inside with a colorful border.</p>
</div>
</div>ग्रेडिएंट पाठ (पुनरावलोकन और विस्तार)
ग्रेडिएंट पाठ में bg-gradient-to-r from-* to-* के माध्यम से पाठ के भरण रंग पर रैखिक ग्रेडिएंट लागू किया जाता है और इसे bg-clip-text text-transparent के साथ मिलाया जाता है। यह तकनीक पृष्ठभूमि ग्रेडिएंट को पाठ की आकृति तक सीमित कर देती है, जिससे अक्षरों का दिखाई देने वाला रंग ग्रेडिएंट बन जाता है। यह बड़े, मोटे शीर्षकों पर सबसे अच्छी तरह काम करती है, जहाँ ग्रेडिएंट का बदलाव स्पष्ट दिखाई देता है।
<h2 class="text-4xl font-extrabold bg-gradient-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent">
Gradient Text Headline
</h2>
<!-- Three-color gradient text -->
<h2 class="text-4xl font-extrabold bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 bg-clip-text text-transparent">
Vibrant Three-Stop Gradient
</h2>ऐनिमेटेड ग्रेडिएंट
हालाँकि Tailwind ग्रेडिएंट की स्थितियों को सीधे ऐनिमेट नहीं कर सकता (CSS मूल रूप से ग्रेडिएंट स्टॉप के बदलाव का समर्थन नहीं करता), फिर भी background-size को ऐनिमेट करके ऐनिमेटेड ग्रेडिएंट प्रभाव बनाया जा सकता है। bg-[length:200%_auto] सेट करें और प्रवाहित ग्रेडिएंट की चमक बनाने के लिए कस्टम CSS ऐनिमेशन से इसे ऐनिमेट करें। यह पैटर्न लोडिंग कंकालों और प्रीमियम डिज़ाइन हाइलाइट में आम है।
/* In your CSS -- custom animation for gradient movement */
@keyframes gradient-x {
0%, 100% { background-position: left center; }
50% { background-position: right center; }
}
.animate-gradient {
background-size: 200% auto;
animation: gradient-x 3s ease infinite;
}मनमाने मानों वाले रेडियल ग्रेडिएंट
Tailwind में डिफ़ॉल्ट रूप से रेडियल ग्रेडिएंट यूटिलिटी शामिल नहीं हैं, लेकिन आप उन्हें मनमाने मानों से लिख सकते हैं। bg-[radial-gradient(...)] सिंटैक्स आपको कोई भी मान्य CSS ग्रेडिएंट मान सीधे निर्दिष्ट करने देता है। स्पॉटलाइट या चमक वाले प्रभाव बनाने के लिए यह शक्तिशाली है, लेकिन मनमाने मानों का सीमित उपयोग करें, क्योंकि वे डिज़ाइन टोकन प्रणाली को दरकिनार कर देते हैं।
<!-- Radial glow effect via arbitrary value -->
<div class="bg-[radial-gradient(ellipse_at_center,_theme(colors.indigo.300),_transparent)] h-64 w-full rounded-xl">
Radial glow from center
</div>व्यावहारिक अभ्यास: SaaS मूल्य-निर्धारण कार्ड ग्रेडिएंट
हाइलाइट किया गया मूल्य-निर्धारण कार्ड (अनुशंसित योजना) अक्सर अलग दिखाने के लिए ग्रेडिएंट पृष्ठभूमि का उपयोग करता है। प्रीमियम और रूपांतरण-अनुकूल रूप के लिए ग्रेडिएंट पृष्ठभूमि को छाया, गोल कोनों और सफ़ेद पाठ के साथ मिलाएँ। जिन योजनाओं को हाइलाइट नहीं किया गया है, उनमें सादी सफ़ेद पृष्ठभूमि होती है, जिससे ग्रेडिएंट कार्ड मूल्य-निर्धारण अनुभाग का दृश्य केंद्र बन जाता है।
<div class="bg-gradient-to-b from-indigo-600 to-indigo-800 rounded-2xl p-8 shadow-2xl text-white">
<p class="text-indigo-200 text-sm font-semibold uppercase tracking-wider">Most Popular</p>
<p class="text-4xl font-black mt-2">$49<span class="text-xl font-normal">/mo</span></p>
<ul class="mt-6 space-y-3 text-indigo-100 text-sm">
<li>Unlimited projects</li>
<li>Priority support</li>
<li>Custom domain</li>
</ul>
<button class="mt-8 w-full bg-white text-indigo-700 font-bold py-3 rounded-xl hover:bg-indigo-50">
Get Started
</button>
</div>त्वरित जाँच
इस पाठ में Tailwind CSS Mastery की अवधारणाओं की अपनी समझ जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: bg-gradient-to-{direction} दिशासूचक बिंदुओं का उपयोग करके ग्रेडिएंट की दिशा सेट करता है, from-*, via-* और to-* अधिकतम तीन रंग-स्टॉप निर्धारित करते हैं, और bg-clip-text text-transparent ग्रेडिएंट से भरा पाठ बनाते हैं। अगले पाठ में हम पृष्ठभूमि की अपारदर्शिता नियंत्रित करना और रंग संशोधकों का प्रभावी उपयोग करना सीखेंगे।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “पृष्ठभूमि ग्रेडिएंट” पाठ निःशुल्क है?
हाँ—“पृष्ठभूमि ग्रेडिएंट” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Tailwind CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Tailwind CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“पृष्ठभूमि ग्रेडिएंट” में मैं क्या सीखूँगा?
समृद्ध दृश्य प्रभावों के लिए bg-gradient-to-* और from-*/via-*/to-* रंग-स्टॉप का उपयोग करके रैखिक ग्रेडिएंट बनाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Tailwind CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Tailwind CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Tailwind CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“पृष्ठभूमि ग्रेडिएंट” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Tailwind CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Tailwind CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।