सीएसएस रेडियल ग्रेडिएंट जनरेटर कस्टम आकार, स्थिति और रंगों के साथ सीएसएस रेडियल ग्रेडिएंट बनाएं।
रेडियल ग्रेडिएंट जनरेटर
कस्टम आकार, स्थिति और रंगों के साथ सीएसएस रेडियल ग्रेडिएंट बनाएं।
रंग चुनें
ग्रेडिएंट के लिए मध्य रंग और किनारे का रंग सेट करें।
आकृति कॉन्फ़िगर करें
वृत्त या अंडाकार आकृति चुनें और मध्य बिंदु निर्धारित करें।
सीएसएस कोड कॉपी करें
अपने परियोजना के लिए उत्पन्न सीएसएस कोड को कॉपी करें।
What Is रेडियल ग्रेडिएंट जनरेटर?
एक रेडियल ग्रेडिएंट जनरेटर सीएसएस ग्रेडिएंट्स बनाता है जो एक केंद्र बिंदु से बाहर की ओर वृत्ताकार या अंडाकार पैटर्न में फैलते हैं। रेखीय ग्रेडिएंट्स के विपरीत, जो एक सीधी रेखा के साथ परिवर्तन करते हैं, रेडियल ग्रेडिएंट्स स्पॉटलाइट-जैसे प्रभाव, चमकदार गोले और गहराई के प्रभाव बनाते हैं जो आधुनिक वेब डिज़ाइन में आम तौर पर उपयोग किए जाते हैं। आप ग्रेडिएंट आकार (वृत्त या अंडाकार), केंद्र स्थिति और रंगों को नियंत्रित कर सकते हैं। जनरेटर सभी आधुनिक ब्राउज़रों में काम करने वाला सीएसएस रेडियल-ग्रेडिएंट() कोड उत्पन्न करता है। रेडियल ग्रेडिएंट्स दृश्य गहराई, नायक अनुभागों पर स्पॉटलाइट प्रभाव, सजावटी पृष्ठभूमि और फ्लैट डिज़ाइनों को अधिक आयामी महसूस कराने वाले सूक्ष्म प्रकाश प्रभाव बनाने के लिए विशेष रूप से प्रभावी होते हैं।
Why Use रेडियल ग्रेडिएंट जनरेटर?
-
विभिन्न प्रभावों के लिए वृत्त और अंडाकार आकृति विकल्प
-
एक्स/वाई स्लाइडर्स के साथ समायोज्य मध्य बिंदु
-
सेटिंग्स बदलने पर लाइव पूर्वावलोकन अद्यतन
-
स्वच्छ, उत्पादन-तैयार सीएसएस आउटपुट
-
साइन अप के बिना नि:शुल्क उपयोग करें
Common Use Cases
स्पॉटलाइट प्रभाव
नायक अनुभागों या उत्पाद छवियों पर ध्यान आकर्षित करने वाले स्पॉटलाइट प्रभाव बनाएं।
ग्लो प्रभाव
कार्ड, मॉडल, या सजावटी तत्वों के लिए चमकदार गोलाकार पृष्ठभूमि उत्पन्न करें।
गहराई और आयाम
सूक्ष्म रेडियल रंग संक्रमण के साथ समतल डिज़ाइनों में दृश्य गहराई जोड़ें।
विगनेट प्रभाव
छवियों पर एक सिनेमैटिक लुक के लिए अंधेरे किनारों वाले विगनेट बनाएं।
Technical Guide
सीएसएस रेडियल-ग्रेडिएंट() एक बिंदु से फैलने वाला ग्रेडिएंट बनाता है। इसका सyntax है: रेडियल-ग्रेडिएंट(आकार केंद्र पर, रंग1, रंग2)। आकार "वृत्त" (सभी दिशाओं में समान त्रिज्या) या "अंडाकार" (त्रिज्या तत्व अनुपात से मेल खाती है) हो सकता है। स्थिति प्रतिशत मूल्यों का उपयोग करती है (50% 50% केंद्र है)। आकार कीवर्ड जैसे closest-side, farthest-corner ग्रेडिएंट कितनी दूर तक फैलता है, इसे नियंत्रित करते हैं। रंग स्टॉप लाइनियर ग्रेडिएंट्स में समान रूप से काम करते हैं। ब्राउज़र केंद्र से बाहर की ओर संकेंद्रीय वृत्त या अंडाकार में रंगों को इंटरपोलेट करता है। रेडियल ग्रेडिएंट्स compositable हैं - आप पृष्ठभूमि-छवि में अल्पविराम पृथक्करण का उपयोग करके कई रेडियल ग्रेडिएंट्स परत कर सकते हैं, जैसे कि एक से अधिक प्रकाश स्रोतों जैसे जटिल प्रभाव।
Tips & Best Practices
-
1परिपूर्ण गोलाकार ग्रेडिएंट के लिए "वृत्त" और पहलू-अनुपात-सचेत आकार के लिए "अंडाकार" का उपयोग करें
-
2उदाहरण के लिए (30% 30%) जैसे असममित प्रकाश प्रभावों के लिए मध्य बिंदु को ऑफ़-सेंटर रखें
-
3जटिल बहु-प्रकाश-स्रोत प्रभावों के लिए कई रेडियल ग्रेडिएंट परतें
-
4पृष्ठभूमि पर सूक्ष्म फ़ेड-आउट प्रभावों के लिए एक किनारे रंग के रूप में पारदर्शी का उपयोग करें
-
5रचनात्मक ओवरले प्रभावों के लिए बैकग्राउंड-ब्लेंड-मोड के साथ संयोजित करें
Related Tools
रंग चुनने वाला
इंटरएक्टिव रंग चुनने वाला, जिसमें HEX, RGB, HSL और CMYK आउटपुट होते हैं।
🎨 Color Tools
रैखिक ग्रेडिएंट जनरेटर
कस्टम रंग, कोण और रंग स्टॉप के साथ सीएसएस रेखीय ग्रेडिएंट बनाएं।
🎨 Color Tools
कोनिक ग्रेडिएंट जनरेटर
पाई चार्ट, रंग चक्र और स्वीपिंग प्रभावों के लिए सीएसएस कोनिक ग्रेडिएंट बनाएं।
🎨 Color Tools
रंग मिक्सर
समायोज्य अनुपात के साथ दो रंगों को एक साथ मिलाएं और पूरे ग्रेडिएंट को देखें।
🎨 Color Tools
सीएसएस फ़िल्टर जनरेटर
दृश्य नियंत्रण के साथ धुंधलापन, चमक, कंट्रास्ट और अधिक जैसे सीएसएस फिल्टर प्रभाव लागू करें।
🎨 CSS & DesignFrequently Asked Questions
Q वृत्त और अंडाकार में क्या अंतर है?
Q क्या मैं मध्य बिंदु कहीं भी रख सकता हूँ?
Q क्या रेडियल-ग्रेडिएंट सभी ब्राउज़रों में समर्थित है?
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.