Skip to main content

सीएसएस कोनिक ग्रेडिएंट जनरेटर पाई चार्ट, रंग चक्र और स्वीपिंग प्रभावों के लिए सीएसएस कोनिक ग्रेडिएंट बनाएं।

कोनिक ग्रेडिएंट जनरेटर illustration
🎨

कोनिक ग्रेडिएंट जनरेटर

पाई चार्ट, रंग चक्र और स्वीपिंग प्रभावों के लिए सीएसएस कोनिक ग्रेडिएंट बनाएं।

1

रंग सेट करें

कोनिक स्वीप के लिए तीन रंग चुनें।

2

सेटिंग्स समायोजित करें

प्रारंभ कोण और केंद्र स्थिति निर्धारित करें।

3

सीएसएस कॉपी करें

उत्पन्न कोनिक-ग्रेडिएंट सीएसएस कोड की प्रतिलिपि बनाएं।

Loading tool...

What Is कोनिक ग्रेडिएंट जनरेटर?

एक कोनिक ग्रेडिएंट जनरेटर सीएसएस ग्रेडिएंट्स बनाता है जो एक केंद्र बिंदु के चारों ओर घूमते हैं, रंगों के बीच अंगुलीय रूप से परिवर्तन करते हैं न कि रेखीय या वृत्ताकार रूप से। कोनिक ग्रेडिएंट्स एक केंद्र बिंदु के चारों ओर घूमते हैं, जो उन्हें रंग चक्र, पाई चार्ट जैसे खंडों, घड़ी के चेहरे, और बहने वाले रंग परिवर्तन बनाने के लिए उपयुक्त बनाता है। यह उपकरण आपको तीन रंगों का चयन करने, शुरुआती कोण सेट करने और केंद्र बिंदु की स्थिति निर्धारित करने देता है। परिणामी सीएसएस कोनिक-ग्रेडिएंट() कोड चिकनी अंगुलीय परिवर्तन बनाता है जो शुरुआती रंग में वापस लपेटता है। कोनिक ग्रेडिएंट्स एक शक्तिशाली सीएसएस सुविधा हैं जो दृश्य प्रभावों को सक्षम करती है जिनके लिए अन्यथा एसवीजी या कैनवास की आवश्यकता होती है, आपके डिज़ाइनों को शुद्ध सीएसएस और जीपीयू-त्वरित रखती है।

Why Use कोनिक ग्रेडिएंट जनरेटर?

  • रैखीय/वृत्ताकार ग्रेडिएंट्स के साथ असंभव घुमावदार कोणीय रंग परिवर्तन बनाएं
  • घूर्णन नियंत्रण के लिए समायोज्य प्रारंभ कोण
  • अप-केंद्र प्रभावों के लिए अनुकूलित केंद्र स्थिति
  • आलंकारिक पृष्ठभूमि और डेटा दृश्यीकरण के लिए उपयुक्त
  • उत्पादन उपयोग के लिए स्वच्छ सीएसएस आउटपुट

Common Use Cases

रंग पहिये

कोनिक ग्रेडिएंट्स का उपयोग करके इंद्रधनुष रंग पहिया पृष्ठभूमि बनाएं।

पाई चार्ट

हार्ड रंग बंद (समान प्रतिशत, दो रंग) के साथ साधारण सीएसएस-केवल पाई चार्ट बनाएं।

आलंकारिक पृष्ठभूमि

अनुभागों और कार्डों के लिए विशिष्ट कोणीय ग्रेडिएंट पृष्ठभूमि बनाएं।

लोडिंग स्पिनर

कोनिक ग्रेडिएंट आर्क्स के साथ सीएसएस-केवल लोडिंग स्पिनर डिज़ाइन करें।

Technical Guide

सीएसएस कोनिक-ग्रेडिएंट() एक केंद्र बिंदु के चारों ओर रंग परिवर्तन बनाता है। वाक्य रचना यह है: conic-gradient(from angle at posX posY, color1, color2, ..., color1)। "from" कोण शुरुआती स्थिति (डिफ़ॉल्ट 0deg = ऊपर) को घुमाता है। रंगों को समान रूप से 360° स्वीप में वितरित किया जाता है जब तक कि स्पष्ट कोण बंद निर्दिष्ट नहीं किए जाते। पहले रंग को अंतिम बंद के रूप में दोहराने से एक सहज लूप बनता है। पाई चार्ट प्रभावों के लिए, प्रतिशत बंद उपयोग करें: conic-gradient(red 0% 25%, blue 25% 50%, green 50% 75%, yellow 75%)। कोनिक ग्रेडिएंट्स क्रोम 69+, फ़ायरफ़ॉक्स 83+, सफारी 12.1+, और एज 79+ में समर्थित हैं। उन्हें बॉर्डर-रेडियस: 50% के साथ मास्क किया जा सकता है और जटिल आकारों के लिए मास्क-इमेज के साथ जोड़ा जा सकता है।

Tips & Best Practices

  • 1
    निरंतर चक्रीय परिवर्तनों के लिए पहला रंग अंतिम बंद के रूप में दोहराएं
  • 2
    पाई चार्ट खंडों के लिए हार्ड स्टॉप (समान प्रतिशत, दो रंग) का उपयोग करें
  • 3
    वृत्ताकार रंग पहिया प्रभावों के लिए बॉर्डर-रेडियस: 50% के साथ मिलाएं
  • 4
    पूरे ग्रेडिएंट को घुमाने के लिए "से" कोण उपयोगी है - एनिमेटेड प्रभावों के लिए
  • 5
    जटिल पैटर्न के लिए एकाधिक कोनिक ग्रेडिएंट्स परतें

Related Tools

Frequently Asked Questions

Q कोनिक ग्रेडिएंट क्या है?
एक कोनिक ग्रेडिएंट एक केंद्र बिंदु के चारों ओर रंगों के बीच परिवर्तन करता है, घड़ी की सुई की तरह कोणीय रूप से फैलता है। यह रैखीय (सीधी रेखा) और वृत्ताकार (केंद्र से बाहर) ग्रेडिएंट्स से भिन्न होता है।
Q क्या मैं कोनिक ग्रेडिएंट्स के साथ पाई चार्ट बना सकता हूं?
हाँ! तेज खंडों (दो रंग एक ही प्रतिशत पर) बनाने के लिए हार्ड रंग बंद का उपयोग करें। उदाहरण: conic-gradient(लाल 0% 30%, नीला 30% 70%, हरा 70%)।
Q क्या कोनिक-ग्रेडिएंट अच्छी तरह से समर्थित है?
यह सभी आधुनिक ब्राउज़रों में समर्थित है, जिनमें क्रोम, फ़ायरफ़ॉक्स, सफारी और एज शामिल हैं। यह एक सीएसएस इमेजेस लेवल 4 विशेषता है जिसका 2020 से व्यापक रूप से अपनाया गया है।

About This Tool

कोनिक ग्रेडिएंट जनरेटर is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.