CSS ग्रेडिएंट जेनरेटर
नयालाइव प्रीव्यू के साथ linear, radial और conic CSS ग्रेडिएंट बनाएँ।
Click the bar to add a stop · drag a handle to move it.
Runs entirely in your browser. Nothing is uploaded.
ब्राउज़र में चलने वाला visual CSS gradient generator
यह CSS gradient generator linear-gradient(), radial-gradient() और conic-gradient() की उलझी हुई syntax को कुछ ही clicks में आसान बना देता है। gradient bar पर color stops को add और drag करें, angle या center set करें, और live preview तुरंत update होती रहती है। जब design सही लगे, production-ready code copy करें। कुछ भी install करने की ज़रूरत नहीं और कोई account भी नहीं बनाना — हर gradient locally render होता है, इसलिए आपका बनाया कोई भी design कभी upload नहीं होता।
यह टूल इसलिए बना है ताकि आपको gradient के लिए कहीं और जाना न पड़े — cssgradient.io (conic support नहीं, Tailwind output नहीं) या Colorzilla के browser extension (PNG export नहीं) से कहीं ज़्यादा complete है। Canva का gradient background टूल features के लिए account माँगता है, Adobe के gradient tools के लिए Creative Cloud subscription चाहिए — यहाँ सब कुछ बिल्कुल free है।
Linear, radial और conic — हर प्रकार का gradient
linear gradient generator (एक angle पर blend), radial gradient generator (center से spotlight, circle या ellipse, size और position control के साथ) और conic gradient generator (color wheel और charts के लिए point के चारों ओर sweep) के बीच switch करें। हर type में उसके ज़रूरी controls आते हैं — linear के लिए angle, radial के लिए shape/size/position, conic के लिए starting angle और center।
अनलिमिटेड color stops add करें, उन्हें drag करके reposition करें, और per-stop opacity set करके rgba() के साथ smooth transparent gradients बनाएं। bar पर click करके जहाँ चाहें नया stop drop करें। Colorzilla जैसे ज़्यादातर competitor tools सिर्फ दो या तीन stops support करते हैं — यहाँ कोई limit नहीं है, इसलिए पाँच-छह stop वाले complex gradients भी simple two-color blends जितने आसान हैं।
CSS, Tailwind या SCSS copy करें — और PNG export करें
Output बस एक tab दूर है। CSS tab में आपको एक ready background declaration मिलती है जिसमें optional -webkit- fallback भी होता है (पुराने browsers के लिए angle correctly convert होता है)। Tailwind tab में linear gradients के लिए idiomatic bg-gradient-to-r from-[...] to-[...] utilities मिलती हैं, और radial व conic के लिए bg-[linear-gradient(...)] arbitrary value। SCSS tab value को reusable $gradient variable में wrap करता है।
Raster चाहिए? Download PNG exact gradient को 1600x900 canvas पर paint करता है — बिना watermark और बिना server round-trip के सच्चा gradient PNG download। Adobe Express इसे subscription के पीछे रखता है। TinyWow को file upload चाहिए। यहाँ यह free है और कुछ भी आपके device से बाहर नहीं जाता।
किसी image से gradient बनाएं
कोई brand photo, screenshot या product shot से matching gradient चाहिए? From image use करें — टूल आपके browser में ही picture के pixels sample करता है, dominant colors ढूंढता है, और उन्हें light से dark order में arrange करके multi-stop gradient seed करता है। analysis locally होती है इसलिए image कहीं upload नहीं होती।
वहाँ से आप extracted stops को adjust कर सकते हैं, angle बदल सकते हैं, किसी color की opacity घटा सकते हैं, या radial या conic blend में switch कर सकते हैं। किसी hero section, card या button को किसी existing image से tie करने वाला gradient background CSS snippet बनाने का यह सबसे तेज़ तरीका है — कोई Figma plugin या Adobe extension नहीं चाहिए।
Presets, randomizer और shareable links
Ideas नहीं सूझ रहे? कोई curated preset tap करें — sunset, ocean, aurora, mint, peach और भी — एक polished gradient load होगा, फिर उसे वहाँ से adjust करें। एक fresh, harmonious दो- या तीन-रंग का combination पाने के लिए Random hit करें। जब color theory पर time बर्बाद नहीं करना हो तो यह एक अच्छा starting point है।
आपका हर बदलाव page URL में encode हो जाता है, इसलिए Copy link से किसी teammate को exactly वही gradient share हो जाती है जो आप देख रहे हैं — कोई export नहीं, कोई account नहीं, कोई screenshot नहीं। link में colors, type, angle और stops सब होते हैं और यह पूरी तरह client-side काम करता है बिना कोई server lookup के। Figma और Canva जैसे tools account के बिना यह नहीं कर सकते।
Private और Free — कोई upload नहीं, कोई account नहीं
कोई sign-up नहीं, कोई cost नहीं, और upload करने को कुछ नहीं। यह CSS gradient maker पूरी तरह आपके device पर JavaScript और HTML canvas से चलता है, इसलिए confidential brand colors और unreleased designs कभी आपके browser से बाहर नहीं जाते। इसे अपना go-to linear, radial और conic gradient generator bookmark करें — backgrounds, buttons, hero sections, overlays और charts के लिए। CSS, Tailwind या SCSS copy करें, या जब भी ज़रूरत हो PNG export करें। iPhone, Android, Windows और Mac सभी पर समान रूप से काम करता है।
Frequently asked questions
CSS gradient कैसे बनाएं?
background (या background-image) property को gradient function पर set करें। सबसे सरल है दो रंगों वाला linear gradient: background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); — यह indigo से pink का left-to-right blend बनाता है। ऊपर अपने colors और angle चुनें, फिर ready-made background line सीधे अपनी stylesheet में copy करें। syntax हाथ से लिखने की कोई ज़रूरत नहीं — generator हर stop drag करते समय खुद बनाता जाता है।
Linear, radial और conic gradient में क्या फर्क है?
linear-gradient एक straight line पर आपके चुने angle से colors blend करता है (जैसे 90deg = left to right)। radial-gradient center point से circles या ellipses में बाहर की तरफ blend करता है, जैसे spotlight। conic-gradient center point के चारों ओर clock की hands की तरह colors sweep करता है, जो color wheels और pie charts के लिए perfect है। यह टूल तीनों build करता है — Linear / Radial / Conic buttons से switch करें। Canva के background generator जैसे ज़्यादातर free gradient tools सिर्फ linear gradients offer करते हैं, और cssgradient.io conic gradients बिल्कुल support नहीं करता।
CSS में background gradient कैसे लगाएं?
किसी भी element के background पर gradient apply करें। पूरे page के background के लिए try करें: body { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); min-height: 100vh; }। चूंकि gradient एक image की तरह count होता है, आप background-attachment: fixed; भी add कर सकते हैं ताकि page scroll होने पर भी यह fixed रहे। ऊपर visually build करें और CSS copy करें। Figma, Canva या किसी design tool की ज़रूरत नहीं। 2026 में सभी modern browsers पर बिना prefixes के काम करता है।
Gradient में दो से ज़्यादा colors कैसे add करें?
Extra color stops add करें, हर एक की अपनी position के साथ। gradient bar पर कहीं भी click करें (या + Add stop button) नया stop drop करने के लिए, फिर drag करके जहाँ चाहें रखें। तीन colors ऐसे दिखता है: linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%)। कोई real limit नहीं है — design की ज़रूरत के हिसाब से जितने stops चाहें add करें। coolors.co सिर्फ actual CSS के बिना color palettes दिखाता है, और Canva gradient editing को account के पीछे lock करता है — यहाँ unlimited-stop production CSS तुरंत मिलती है।
Gradient का angle या direction कैसे set करें?
Linear gradient के लिए पहली value angle होती है: 0deg ऊपर की तरफ, 90deg दाईं तरफ, 180deg नीचे की तरफ, 270deg बाईं तरफ। 'to right' या 'to bottom right' जैसे keywords भी use कर सकते हैं, इसलिए linear-gradient(to right, ...) और linear-gradient(90deg, ...) एक जैसे हैं। Angle slider drag करें या direction arrow click करें और value live update होती है। Output CSS real time में update होती है ताकि किसी भी stylesheet या framework में सीधे copy-paste कर सकें।
2026 में gradients के लिए -webkit- prefix की ज़रूरत है?
2026 में नहीं। linear-gradient, radial-gradient और conic-gradient सभी current browsers में बिना prefix के supported हैं, इसलिए plain background: linear-gradient(...) काफी है। -webkit- तभी add करें जब बहुत पुराना Safari/iOS (2017 से पहले) या legacy Android WebView support करना हो। CSS output में 'Add -webkit- prefix' tick करें और टूल standard line के ऊपर correctly-converted fallback line emit करता है। Angle conversion (webkit version में 90deg का 270deg हो जाना) automatically handle होती है।
Tailwind CSS में gradient कैसे बनाएं?
Gradient utilities use करें: एक direction class plus from-, via- और to- colors, जैसे bg-gradient-to-r from-indigo-500 to-pink-500। Exact colors के लिए arbitrary values use करें: bg-gradient-to-r from-[#6366f1] to-[#ec4899]। अपने current gradient के classes copy करने के लिए output को Tailwind tab पर switch करें — इसमें radial और conic gradients के लिए bg-[linear-gradient(...)] arbitrary value भी शामिल है जिनके लिए Tailwind का कोई named shorthand नहीं है। ज़्यादातर Tailwind gradient resources इस edge case को cover नहीं करते।
Gradient को PNG image में export कैसे करें?
Download PNG पर click करें। टूल आपका exact gradient HTML canvas पर 1600x900 पर paint करता है और .png के रूप में save करता है — slide background, social banner या design mockup के लिए ideal। यह पूरी तरह आपके browser में render होता है, इसलिए कुछ भी upload नहीं होता। TinyWow को server पर file upload चाहिए, Adobe Express PNG export को subscription के पीछे रखता है — यहाँ कोई privacy risk नहीं और कोई cost नहीं। दूसरा size चाहिए? बाद में किसी भी image editor में PNG scale या crop करें।
Image से gradient कैसे बनाएं?
'From image' पर click करें और कोई photo चुनें। टूल pixels locally read करता है, सबसे common colors ढूंढता है, और उनसे gradient seed करता है — किसी brand photo या product shot को match करने का एक quick तरीका। आपकी image device से कहीं नहीं जाती — browser में analyze होती है और तुरंत discard हो जाती है। Adobe Color या Coolors palettes extract करने के लिए upload या account माँगते हैं — यहाँ सब कुछ आपकी machine पर private रहता है। फिर आप extracted stops adjust कर सकते हैं, angle बदल सकते हैं, या radial या conic में switch कर सकते हैं।
Conic gradient क्या है और कब use करें?
Conic gradient एक line के साथ नहीं बल्कि center point के चारों ओर colors rotate करता है, इसलिए transition clock hand की तरह sweep करती है। conic-gradient(from 0deg, red, yellow, green, blue, red) एक full color wheel बनाता है। ये pie charts, donut charts, progress rings, color pickers और angular glow effects के लिए ideal हैं। 2021 से Chrome, Firefox, Safari और Edge में बिना prefix के browser support solid है। ऊपर Conic select करें, starting angle और center position set करें, और experiment करें। ज़्यादातर gradient generator tools conic support ही नहीं करते।
Smooth या transparent gradient कैसे बनाएं?
किसी stop को alpha value दें। Stop पर Opacity slider कम करें और CSS rgba() में switch हो जाती है। उदाहरण के लिए, linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) clear से 60% black में fade करता है — photo पर text के पीछे classic scrim। Tip: muddy gray midpoint से बचने के लिए same color (transparent to solid of one hue) के बीच fade करें — यह problem browser तब produce करते हैं जब दो different fully-transparent colors के बीच fade करते हैं। Stop opacity adjust करने पर टूल automatically rgba output handle करता है।
क्या यह cssgradient.io या Colorzilla से बेहतर है?
UtiloKit का gradient generator उन दोनों tools की सारी चीज़ें cover करता है — linear, radial और conic gradient types, multi-stop editors, code copy — plus Tailwind CSS output, PNG download, gradient-from-image extraction, shareable links और animated gradient support। cssgradient.io में conic gradient support नहीं है और Tailwind output नहीं है। Colorzilla का gradient editor एक browser extension है और PNG या Tailwind export नहीं करता। यहाँ सब कुछ आपके browser में चलता है — कोई upload नहीं, कोई signup नहीं, और features को ads के पीछे नहीं रखा गया।
क्या iPhone या Android पर इस gradient generator को use कर सकते हैं?
हाँ। यह टूल fully responsive है और किसी भी modern mobile browser में काम करता है। iPhone पर Safari में या Android पर Chrome में खोलें, gradient बनाएं, और CSS directly clipboard में copy करें। सब कुछ client-side run होता है इसलिए कोई download ज़रूरी नहीं और page load हो जाने के बाद slow mobile connections पर भी काम करता है। Drag-based stop editor touch input के लिए adapt होता है, इसलिए phone पर multi-stop gradients बनाना भी straightforward है।
Related tools
सभी टूल्स देखें
नया Glassmorphism जेनरेटर
frosted-glass कार्ड डिज़ाइन करें और CSS कॉपी करें — लाइव प्रीव्यू के साथ।
नया CSS Text-Shadow जेनरेटर
लाइव प्रीव्यू के साथ CSS text shadow ट्यून करें और कोड कॉपी करें।
नया कलर मिक्सर
दो रंगों को किसी भी अनुपात में मिलाएँ और परिणाम या कोई भी चरण कॉपी करें।
नया इमेज कलर पिकर
इमेज से कोई भी रंग चुनें और उसका प्रमुख पैलेट HEX, RGB और HSL में निकालें।
नया Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
नया Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.