मुख्य सामग्रीमा जानुहोस्
LibraTool logoLibraTool

निःशुल्क CSS ग्रेडियन्ट जेनेरेटर

लाइभ प्रिभ्यूका साथ linear, radial, र conic CSS gradient सिर्जना गर्नुहोस्। एक क्लिकमा CSS कपी गर्नुहोस्।

लोड भएपछि अफलाइन काम गर्छ
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

धेरै फरक रङबीचको खैरो बीचको बिन्दु हटाउँछ। पुराना ब्राउजरका लागि फलब्याकको रूपमा साधारण sRGB लाइन थप्छ।

0%
100%

पूर्वनिर्धारित

सामान्य प्रयोगहरू

  • हीरो सेक्सनका लागि ग्रेडियन्ट बनाउनुहोस्वेबसाइट हीरो सेक्सन र ल्यान्डिङ पृष्ठहरूको लागि पूर्ण-पृष्ठ ग्रेडियन्ट पृष्ठभूमि डिजाइन गर्नुहोस्।
  • ग्रेडियन्ट बटन र CTA बनाउनुहोस्कार्यको लागि आकर्षक कल गरेर बाहिर निस्कने ग्रेडियन्ट बटन पृष्ठभूमि डिजाइन गर्नुहोस्।
  • कार्डहरूको लागि ग्रेडियन्ट पृष्ठभूमि बनाउनुहोस्कार्डहरू, मोडलहरू, साइडबारहरू र UI कम्पोनेन्ट पृष्ठभूमिहरूको लागि ग्रेडियन्ट पूर्ण डिजाइन गर्नुहोस्।
  • सामाजिक मिडिया ग्राफिक्सको लागि ग्रेडियन्ट बनाउनुहोस्Instagram पोस्टहरू, YouTube थम्बनेलहरू र Twitter कार्डहरूको लागि जीवंत ग्रेडियन्ट पृष्ठभूमि डिजाइन गर्नुहोस्।
  • चार्टहरूको लागि रङ स्केलहरू बनाउनुहोस्हीटम्यापहरू, प्रगति पट्टीहरू र डेटा भिजुअलाइजेशनहरूको लागि ग्रेडियन्ट रङ स्केलहरू उत्पन्न गर्नुहोस्।

यो कसरी काम गर्छ

ग्रेडियन्ट जेनेरेटरले CSS ग्रेडियन्ट स्ट्रिङहरू सीधै ब्राउजरमा बनाउँछ — कुनै लाइब्रेरी छैन, कुनै सर्भर छैन, कुनै अपलोड छैन। एउटा हातले लेखिएको फङ्सनले तपाईंको रङ स्टप र कोणबाट सही linear-gradient, radial-gradient, वा conic-gradient सिन्ट्याक्स वास्तविक समयमा जोड्छ, त्यसपछि तपाईंले छानेको आउटपुट लक्ष्यअनुसार नतिजा फर्म्याट गर्छ।

  1. 1
    स्टप र दिशा कन्फिगर गर्नुहोस्
    तपाईं ब्राउजरको नेटिभ रङ छनोटकर्ता प्रयोग गरी 2 र 6 रङ स्टपबीच सेट गर्नुहुन्छ, त्यसपछि हरेक स्टपलाई रेन्ज स्लाइडरसँग 0–100% अक्षमा राख्नुहुन्छ। Linear र conic ग्रेडियन्टका लागि तपाईं एउटा कोण (0–360°) पनि छान्नुहुन्छ; radial ग्रेडियन्टका लागि तपाईं आकार (ellipse वा circle) र साइज किवर्ड छान्नुहुन्छ जसले ग्रेडियन्ट कति टाढासम्म फैलिन्छ नियन्त्रण गर्छ।
  2. 2
    buildCss ले ग्रेडियन्ट स्ट्रिङ जोड्छ
    हरेक परिवर्तनमा, एउटा स्थानीय buildCss फङ्सनले तपाईंका प्यारामिटरहरूलाई सही CSS फङ्सन कलमा जोड्छ — जस्तै linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%)। कुनै लाइब्रेरी संलग्न छैन; स्ट्रिङ सादा JavaScript टेम्प्लेट लजिकले बन्छ र स्टप एरेबाट सीधै जोडिन्छ।
  3. 3
    प्रत्यक्ष पूर्वावलोकन इनलाइन स्टाइलमार्फत रेन्डर हुन्छ
    जोडिएको ग्रेडियन्ट स्ट्रिङ सीधै div एलिमेन्टमा एउटा इनलाइन पृष्ठभूमि स्टाइलको रूपमा लागू हुन्छ, त्यसैले ब्राउजरको आफ्नै CSS इन्जिनले पूर्वावलोकन रेन्डर गर्छ। कुनै क्यानभास वा छवि संलग्न छैन — तपाईंले देख्नुहुने कुरा शाब्दिक रूपमा लागू भइरहेको CSS प्रोपर्टी हो।
  4. 4
    चार फर्म्याटमा प्रतिलिपि-तयार आउटपुट
    एउटा फर्म्याट छनोटकर्ताले उही ग्रेडियन्ट स्ट्रिङलाई सादा CSS (background: ...), एउटा CSS-सँग-ठोस-फलब्याक ब्लक, एउटा Tailwind arbitrary-value क्लास, वा एउटा SCSS भेरिएबल घोषणामा रूपान्तरण गर्छ। Copy क्लिक गर्दा छानिएको आउटपुट navigator.clipboard.writeText मार्फत क्लिपबोर्डमा लेखिन्छ। हालको ग्रेडियन्ट URL ह्यासमा पनि इन्कोड गरिन्छ त्यसैले तपाईं यसलाई बुकमार्क वा सेयर गर्न सक्नुहुन्छ।

सम्बन्धित उपकरणहरू

🟦

CSS ग्रिड जनरेटर

CSS ग्रिड दृश्यमान रूपमा डिजाइन गर्नुहोस् — ट्र्याकहरू, एकाइहरू र अंतरहरू — र उत्पन्न CSS र HTML प्रतिलिपि गर्नुहोस्।

प्रयास गर्नुहोस्
↔️

CSS Flexbox जनरेटर

Flex दिशा, र्याप, जस्टिफाई र लाइभ वस्तुहरूमा पङ्क्तिबद्ध गर्नुहोस् — र CSS प्रतिलिपि गर्नुहोस्।

प्रयास गर्नुहोस्
🧮

म्याट्रिक्स क्याल्कुलेटर

म्याट्रिक्स जोड्नुहोस्, घटाउनुहोस्, गुणन गर्नुहोस्, ट्रान्सपोज, इन्भर्ट र रिड्युस गर्नुहोस्, साथै डिटरमिनेन्ट, र्‍याङ्क, आइगेनभ्यालु र Ax = b समाधान — 8×8 सम्म, एक ट्यापमा कपी। निःशुल्क र निजी।

प्रयास गर्नुहोस्

बारम्बार सोधिने प्रश्नहरू