मुख्य बिंदु
- 01सभी तीन CSS gradient प्रकार — linear, radial, और conic — लाइव प्रीव्यू के साथ समर्थित हैं।
- 02छह रंग स्टॉप तक जोड़ें, प्रत्येक एक स्वतंत्र स्थिति और रंग के साथ।
- 03आउटपुट एक संपूर्ण background घोषणा है जो किसी भी स्टाइलशीट में पेस्ट करने के लिए तैयार है।
- 04कोई साइन-अप नहीं, कोई इंस्टॉल नहीं, और कुछ भी अपलोड नहीं — सब कुछ आपके ब्राउज़र में चलता है।
एक दृश्य Gradient जेनरेटर का उपयोग क्यों करें?
हाथ से CSS gradients लिखना जल्दी ही कष्टप्रद हो जाता है। सिंटैक्स एक बार जब आप इसे जानते हैं तो पढ़ने योग्य है, लेकिन एक दृश्य प्रीव्यू के बिना सटीक स्टॉप स्थिति और रंग चुनना एक सरल डिज़ाइन निर्णय को DevTools में trial-and-error में बदल देता है। एक जेनरेटर आपको परिणाम को रीयल टाइम में देखने और जैसे ही यह सही दिखता है वैसे ही स्वच्छ कोड को निर्यात करने देता है।
यह उपकरण सभी तीन आधुनिक gradient प्रकार को समर्थित करता है। Linear वह क्लासिक दिशात्मक blend है जिसे आप hero backgrounds और buttons के लिए उपयोग करेंगे। Radial एक बिंदु से बाहर की ओर फैलता है — spot lighting प्रभाव और vignettes के लिए बहुत अच्छा। Conic एक केंद्र के चारों ओर घूमता है, जिससे यह pie chart segments, color wheels, और spinner indicators के लिए जाता है। built-in presets (Lime Swiss, Sunset, Sky, Aurora) में से एक के साथ शुरू करें या शुरुआत से डिज़ाइन करें।
CSS Gradient कैसे जेनरेट करें
पूरी प्रक्रिया एक मिनट से कम लेती है।
- 01
एक gradient प्रकार चुनें
प्रकार selector से Linear, Radial, या Conic चुनें। linear के लिए, कोण भी सेट करें। प्रीव्यू तुरंत अपडेट होता है।
- 02
रंग स्टॉप जोड़ें और स्थिति दें
Add Stop पर क्लिक करें एक नया स्टॉप डालने के लिए, फिर इसके स्लाइडर को खींचें या इसे स्थिति देने के लिए एक प्रतिशत टाइप करें। छह स्टॉप तक समर्थित हैं — स्टॉप स्वचालित रूप से स्थिति के आधार पर फिर से क्रमबद्ध होते हैं।
- 03
प्रत्येक स्टॉप का रंग उठाएं
सिस्टम color picker को खोलने के लिए color swatch पर क्लिक करें, या एक hex मान सीधे टाइप करें। RGB और hex दोनों प्रारूप काम करते हैं।
- 04
रीयल टाइम में पूर्वावलोकन करें
प्रीव्यू पैनल ब्राउज़र के native gradient engine का उपयोग करके आपके gradient को रेंडर करता है, इसलिए परिणाम ठीक उसी से मेल खाता है जो CSS production में उत्पादन करेगा।
- 05
CSS घोषणा को कॉपी करें
पूर्ण background: linear-gradient(...) घोषणा को पकड़ने के लिए Copy पर क्लिक करें। एक स्टाइलशीट, एक styled component, या Tailwind arbitrary मान जैसे bg-[<value>] में पेस्ट करें।
सामान्य Gradient Use Cases
प्रत्येक gradient प्रकार एक अलग scenario में उत्कृष्ट है।
- 01Hero section backgrounds — 135° पर linear gradient एक आधुनिक diagonal sweep के लिए।
- 02Button hover states — depth के लिए subtle दो-स्टॉप linear gradient।
- 03Radial spotlight या vignette — एक छवि overlay पर dark-to-transparent radial।
- 04Pie charts और progress rings — hard stops के साथ conic gradient।
- 05Color-wheel selector previews — full-spectrum conic gradient।
- 06Text gradients — gradient को background पर लागू करें, फिर background-clip: text का उपयोग करें।
पूरी तरह से आपके ब्राउज़र में चलता है
gradient जेनरेटर 100% client-side चलता है — कोई डेटा किसी भी सर्वर में नहीं भेजा जाता है। प्रीव्यू आपके ब्राउज़र के अपने CSS engine द्वारा रेंडर किया जाता है, जिसका मतलब है कि आप जो देखते हैं वह किसी भी दर्शक के ब्राउज़र के समान CSS के साथ रेंडर करेगा।
एक practical नोट: email clients के पास अभी भी CSS gradients के लिए spotty support है। यदि आप generated CSS को एक HTML email template में पेस्ट कर रहे हैं, तो gradient घोषणा से पहले एक solid background-color fallback जोड़ें ताकि पुराने clients पर प्राप्तकर्ता कुछ reasonable देख सकें।
CSS Gradient जेनरेटर FAQ
linear, radial, और conic gradients के बीच क्या अंतर है?
Linear gradients एक दिए गए कोण पर एक सीधी रेखा के साथ संक्रमण करते हैं। Radial gradients एक केंद्र बिंदु से बाहर की ओर फैलते हैं — highlights और spot प्रभाव के लिए उपयोगी। Conic gradients एक केंद्र के चारों ओर घड़ी की सुई की तरह घूमते हैं — pie segments और color wheels के लिए आदर्श।
क्या मैं इसे Tailwind CSS projects के लिए उपयोग कर सकता हूं?
हाँ। Generated मान को कॉपी करें और इसे एक Tailwind arbitrary मान के रूप में उपयोग करें, उदाहरण के लिए: bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]। Tailwind इसे आपकी आउटपुट स्टाइलशीट में शामिल करेगा।
क्या प्रीव्यू बिल्कुल वही match करता है जो मैं live site पर देखूंगा?
हाँ — प्रीव्यू उसी ब्राउज़र gradient engine द्वारा रेंडर किया जाता है जो आपके live CSS को रेंडर करेगा, इसलिए आउटपुट pixel-accurate है।
क्या मैं CSS gradients को email templates में उपयोग कर सकता हूं?
अधिकांश email clients CSS gradients को विश्वसनीय रूप से समर्थित नहीं करते हैं। हमेशा एक solid background-color को अपनी gradient घोषणा से पहले एक fallback के रूप में जोड़ें।
क्या color stops की संख्या पर कोई सीमा है?
जेनरेटर छह स्टॉप तक समर्थित करता है। अधिकांश designs के लिए दो से चार पर्याप्त है; छह से अधिक clarity को कम करने के बजाय richness जोड़ता है।