Preview

उत्पन्न सीएसएस

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

ग्रेडियन्ट नियन्त्रण

135°
0%
100%

लोकप्रिय प्रिसेट

ग्रेडियन्ट उदाहरणहरू

यी आश्चर्यजनक ग्रेडियन्ट उदाहरणहरू अन्वेषण गर्नुहोस् र तपाईंको अर्को परियोजनाको लागि प्रेरित हुनुहोस्। जेनेरेटरमा लोड गर्न कुनै पनि ग्रेडियन्टमा क्लिक गर्नुहोस्।

सूर्यास्त ब्लश

सुन्दर सूर्यास्तबाट प्रेरित न्यानो ढाल।

ओसियन ब्रीज

एक शान्त ढाल तटीय पानीको भावना लाई उत्तेजित गर्दछ।

मिन्ट फ्यूजन

पुदिना र आकाश नीलो संयोजन एक ताजा र आधुनिक ग्रेडियन्ट।

हरियो बगैंचा

प्रकृतिको सुन्दरताको प्रतिनिधित्व गर्ने जीवन्त ढाल।

ब्रह्माण्डीय सपना

रातको आकाशबाट प्रेरित एक जादुई ढाल।

सुनौलो घण्टा

गोधूलिको सार क्याप्चर गर्ने न्यानो ग्रेडियन्ट।

ग्रेडियन्ट कागजात

सीएसएस ग्रेडिएन्ट हरू के हुन्?

सीएसएस ग्रेडिएन्टले तपाईँलाई दुई वा बढी रङहरू बीच चिकनी संक्रमण प्रदर्शन गर्न अनुमति दिन्छ। तिनीहरू तत्वहरूको लागि पृष्ठभूमिको रूपमा प्रयोग गर्न सकिन्छ र तीन फरक प्रकारहरूमा आउँदछ:

  • रैखिक ग्रेडिएन्ट:एक सीधा रेखा को साथ संक्रमण रंग।
  • रेडियल ग्रेडियन्ट:केन्द्र बिन्दुबाट बाहिरी रूपमा रङहरू संक्रमण गर्नुहोस् ।
  • कोनिक ग्रेडियन्ट:वृत्तमा केन्द्र बिन्दु वरिपरि संक्रमण रङहरू ।

ग्रेडियन्ट कसरी प्रयोग गर्ने

एक पटक तपाईंले हाम्रो उपकरण प्रयोग गरेर ग्रेडियन्ट उत्पन्न गरेपछि, तपाईं आफ्नो परियोजनाहरूमा सीएसएस कोड प्रयोग गर्न सक्नुहुनेछ:

  1. जेनेरेटरबाट सीएसएस कोड प्रतिलिपि बनाउनुहोस् ।
  2. यसलाई तपाईंको सीएसएस फाइलमा टाँस्नुहोस्, वा यसलाई तपाईंको एचटीएमएल तत्वहरूमा इनलाइन प्रयोग गर्नुहोस्।
  3. प्रयोग गरेर कुनै पनि तत्वमा ग्रेडियन्ट लागू गर्नुहोस्background property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • अधिक जटिल ग्रेडियन्ट प्रभावका लागि दुई भन्दा बढी रङ प्रयोग गर्नुहोस् ।
  • जहाँ संक्रमणहरू हुन्छन् नियन्त्रण गर्न रङ स्थितिहरू समायोजन गर्नुहोस्।
  • अझ रचनात्मक प्रभावहरूको लागि बहुविध ग्रेडियन्टहरू मिलाउनुहोस्।
  • कोनिक ग्रेडियन्टहरूको लागि, केन्द्र परिवर्तन गर्दा रोचक ढाँचाहरू सिर्जना गर्दछ।
  • पछि प्रयोगका लागि तपाईँको मनपर्ने ग्रेडियन्ट बचत गर्नुहोस् ।

ब्राउजर समर्थन

आधुनिक ब्राउजरहरूमा सीएसएस ग्रेडियन्टहरू व्यापक रूपमा समर्थित छन्। तथापि, इन्टरनेट एक्सप्लोरर जस्ता पुरानो ब्राउजरहरूले तिनीहरूलाई सही तरिकाले प्रस्तुत गर्न सक्दैनन्। जहिले पनि फलब्याक रङ प्रदान गर्नुहोस्:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

यो उपकरणको बारेमा

हाम्रो सीएसएस ग्रेडिएन्ट जेनरेटर विकासकर्ताहरू र डिजाइनरहरूलाई सहजरूपमा सुन्दर ग्रेडियन्टहरू सिर्जना गर्न मद्दत गर्न डिजाइन गरिएको छ। चाहे तपाईं वेबसाइट, अनुप्रयोगमा काम गर्दै हुनुहुन्छ, वा केवल रङहरूसँग प्रयोग गर्न चाहनुहुन्छ, यो उपकरणले तपाईंको परियोजनाको लागि उत्तम ग्रेडियन्ट उत्पन्न गर्न सजिलो बनाउँछ।

Features

प्रयोग गर्न सजिलो

ग्रेडिएन्ट सिर्जना गर्नका लागि सहज इन्टरफेस।

उत्तरदायी डिजाइन

सबै स्क्रिन साइजमा पूर्ण रूपमा काम गर्दछ।

प्रतिलिपि टाँस्न तयार छ

तुरुन्तै सफा सीएसएस कोड प्राप्त गर्नुहोस्।

पूर्वसेट उपलब्ध

सुन्दर पूर्वनिर्धारित ग्रेडियन्टहरूबाट सुरु गर्नुहोस्।

Related Tools