असीमित stops, OKLCH-aware interpolation और Tailwind v4 utility output के साथ linear, radial और conic gradients बनाएँ। लाइव प्रीव्यू, 30+ presets, आपके ब्राउज़र में।
Linear चुने गए कोण पर सीधी रेखा के साथ blend होता है (0° = ऊपर की ओर, 90° = दाईं ओर)। Radial एक केंद्र बिंदु से बाहर की ओर blend होता है — circle या ellipse, farthest-corner जैसे size keywords के साथ। Conic एक केंद्र बिंदु के चारों ओर घूमता है — color stops घड़ी की सुइयों जैसे कोणों पर बैठते हैं। Conic pie charts, dial readouts और सिंथेटिक color-wheel backgrounds के लिए शानदार है।
जब उन hues के बीच transition हो जो analogous नहीं हैं — जैसे blue → yellow, या red → green। default sRGB interpolation एक गंदे grey midpoint से गुज़रता है; OKLCH (CSS Color Module 4 in oklch) midpoint को vivid रखता है क्योंकि यह perceptually uniform space में interpolate करता है। समान hues के बीच two-stop gradients के लिए, अंतर छोटा है। Multi-stop या wide-hue-range gradients के लिए, OKLCH नाटकीय रूप से बेहतर है।
Linear / radial / conic, OKLCH-smooth, Tailwind-aware — और कुछ छोटे-छोटे touches जो इसे वाकई इस्तेमाल करने में मज़ेदार बनाते हैं।
Linear 0-360° कोण के साथ, radial circle/ellipse + size + position के साथ, conic from-angle + position के साथ। सभी standards-compliant CSS Images Module Level 4 syntax उत्पन्न करते हैं।
किसी भी प्रतिशत पर stops जोड़ें, फाइन-ट्यून करने के लिए position slider drag करें, रंग चुनने के लिए swatch पर क्लिक करें या HEX paste करें। Stops output पर अपने आप sort हो जाते हैं। हटाने के लिए × पर क्लिक करें (न्यूनतम 2 stops)।
default sRGB और modern in oklch interpolation के बीच स्विच करें। OKLCH perceptually smoother midpoints देता है — hue jumps में कोई गंदा grey band नहीं। उन ब्राउज़रों पर सहजता से fallback होता है जिन्होंने अभी CSS Color 4 ship नहीं किया।
तीन output panes लाइव अपडेट होते हैं: raw CSS (background-image: linear-gradient(...)), Tailwind v4 arbitrary-value utility (bg-[linear-gradient(...)]), और एक JSON design-token snippet जो Style Dictionary या Figma Tokens के लिए तैयार है।
Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — load करने और tweak करने के लिए क्लिक करें। हर preset एक असली production-quality starting point है, बस एक नाम नहीं।
प्रीव्यू native background-image से रेंडर होता है, इसलिए जो आप देखते हैं वही आपकी stylesheet उत्पन्न करती है। हर पिक्सेल लोकल चलता है — DevTools → Network खोलें और zero outbound requests verify करें।
खाली स्लेट से production-ready CSS, Tailwind, या JSON तक चार चरण।
Linear backgrounds, headers, hero sections के लिए। Radial spotlights, vignettes, glowy buttons के लिए। Conic pie charts, colour wheels, और trendy synthetic backgrounds के लिए। tabs के साथ इनके बीच स्विच करें — स्विच के दौरान आपके color stops बने रहते हैं।
Picker खोलने के लिए colour swatch पर क्लिक करें, या सीधे field में HEX paste करें। Stop की position 0-100% सेट करने के लिए slider drag करें। सबसे बड़े gap पर एक नया stop डालने के लिए + Add stop क्लिक करें (midpoint colour के साथ)। कुल 12 तक stops।
Linear के लिए, कोण सेट करें (0° ऊपर इंगित करता है, 90° दाएँ)। Radial के लिए, shape, size keyword और centre position चुनें। Conic के लिए, starting angle सेट करें। Multi-hue gradients में perceptually smooth midpoints के लिए Color interpolation को OKLCH पर स्विच करें।
तीन panes लाइव अपडेट होते हैं: CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (design-token shape)। प्रत्येक पर copy icon का उपयोग करें, या project में drop करने के लिए तैयार gradient.css फ़ाइल save करने के लिए Download CSS दबाएँ।
चार सामान्य परिदृश्य जहाँ privacy-first browser tool, Figma + एक अलग gradient site खोलने से बेहतर है।
अपने ब्रांड के करीब एक preset चुनें, अपने दो ब्रांड colours stops में डालें, साफ midpoint के लिए OKLCH interpolation पर स्विच करें। CSS कॉपी करें, अपने hero की stylesheet में paste करें। कुल समय: 2 मिनट से कम।
एक बार 3-stop brand gradient बनाएँ, JSON design token के रूप में कॉपी करें, Style Dictionary / Figma Tokens में डालें। अब हर platform पर हर button + card संदर्भ द्वारा वही gradient उपयोग करता है। एक जगह अपडेट करें, हर जगह propagate होता है।
Synthetic conic gradients pie-chart visuals, progress dials, या 'data-loading' shimmer states के लिए परफेक्ट हैं। Conic प्रकार चुनें, from-angle सेट करें, सही प्रतिशत पर stops डालें — math 0-360° कोणों को percent positions से ठीक मैच करता है।
Gradient बनाएँ, अपने target से मेल खाने के लिए aspect ratio सेट करें (slides के लिए 16:9, IG के लिए 1:1, X header के लिए 3:1), preview का स्क्रीनशॉट लें। या CSS को एक one-off HTML फ़ाइल में कॉपी करें और अपने ब्राउज़र में ठीक उस pixel size पर स्क्रीनशॉट लें जिसकी आपको ज़रूरत है।
आपके colours और gradients कभी आपका device नहीं छोड़ते। DevTools → Network खोलें और किसी भी ऑपरेशन के दौरान आपको zero outbound requests दिखेंगी।
background-image का उपयोग करता है — इसलिए रेंडर किया गया gradient ठीक वैसा मेल खाता है जैसा आपकी stylesheet आपके users के ब्राउज़रों में उत्पन्न करेगी।
CSS gradients, OKLCH interpolation, और design-token systems पर हाथ से चुनी गई पठन सामग्री।
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Linear चुने गए कोण पर सीधी रेखा के साथ blend होता है (0° = ऊपर की ओर, 90° = दाईं ओर)। Radial एक केंद्र बिंदु से बाहर की ओर blend होता है — circle या ellipse, farthest-corner जैसे size keywords के साथ। Conic एक केंद्र बिंदु के चारों ओर घूमता है — color stops घड़ी की सुइयों जैसे कोणों पर बैठते हैं। Conic pie charts, dial readouts और सिंथेटिक color-wheel backgrounds के लिए शानदार है।
जब उन hues के बीच transition हो जो analogous नहीं हैं — जैसे blue → yellow, या red → green। default sRGB interpolation एक गंदे grey midpoint से गुज़रता है; OKLCH (CSS Color Module 4 in oklch) midpoint को vivid रखता है क्योंकि यह perceptually uniform space में interpolate करता है। समान hues के बीच two-stop gradients के लिए, अंतर छोटा है। Multi-stop या wide-hue-range gradients के लिए, OKLCH नाटकीय रूप से बेहतर है।
एक arbitrary-value utility जिसे आप सीधे JSX / Blade / HTML में paste कर सकते हैं: bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]। कोई tailwind.config.js बदलाव की ज़रूरत नहीं; किसी भी Tailwind 4 project पर काम करता है। यदि आप named colour tokens पसंद करते हैं, तो CSS को कॉपी करें और हाथ से कन्वर्ट करें।
Linear और radial gradients 2014 से सार्वभौमिक रूप से समर्थित हैं। Conic gradients 2021 तक सभी evergreen browsers में ship हो गए। in oklch interpolation keyword Chrome 111+, Safari 16.2+, Firefox 113+ में समर्थित है। यदि आपको पुराने ब्राउज़रों को सपोर्ट करना है, default sRGB interpolation का उपयोग करें — visual difference hue-jumping multi-stop gradients के लिए सबसे अधिक मायने रखता है।
नहीं। Gradient string generation, CSS / Tailwind / JSON serialisation, और लाइव प्रीव्यू सब आपके device पर JavaScript में चलते हैं। DevTools → Network खोलें और किसी भी ऑपरेशन के दौरान आपको zero outbound requests दिखेंगी। Brand colours, internal tokens paste करें — कुछ भी आपके laptop से बाहर नहीं जाता।