बॉर्डर रेडियस जेनरेटर
मुफ्त ऑनलाइन बॉर्डर रेडियस जेनरेटर। 8 हैंडल खींचें या ब्लॉब प्रीसेट चुनें, जैविक CSS आकार बनाएं और कोड तुरंत कॉपी करें।
8-वैल्यू border-radius सिंटैक्स का क्या अर्थ है?
सिंटैक्स border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 में स्लैश से पहले के मान क्षैतिज त्रिज्याएँ (ऊपर बाएँ, ऊपर दाएँ, नीचे दाएँ, नीचे बाएँ) और बाद के मान ऊर्ध्वाधर त्रिज्याएँ हैं। हर दिशा में अलग मान देने से ही जैविक ब्लॉब आकार बनते हैं।
जनरेट किए गए CSS का उपयोग कैसे करें?
border-radius वाली लाइन कॉपी करें और जिस तत्व को आकार देना है उसके किसी भी CSS नियम में पेस्ट करें, जैसे .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }। यह साधारण CSS, Sass, Tailwind अर्बिट्रेरी वैल्यू और इनलाइन स्टाइल में काम करता है।
ब्लॉब आकार कहाँ उपयोग होते हैं?
आधुनिक वेब और ऐप डिज़ाइन में हीरो इलस्ट्रेशन, अवतार, प्रोफ़ाइल फ़ोटो, फ़ीचर कार्ड, बटन और सजावटी बैकग्राउंड में ब्लॉब आकार लोकप्रिय हैं।
क्या गोल कोने सभी ब्राउज़र में काम करते हैं?
हाँ। border-radius Chrome, Firefox, Safari, Edge और मोबाइल ब्राउज़र सहित हर आधुनिक ब्राउज़र में समर्थित है, किसी वेंडर प्रीफ़िक्स की ज़रूरत नहीं है।
क्या मैं ब्लॉब आकार को एनिमेट कर सकता हूँ?
हाँ। border-radius एनिमेट करने योग्य प्रॉपर्टी है, इसलिए CSS ट्रांज़िशन जोड़कर आकृतियों के बीच सहज रूप से मॉर्फ कर सकते हैं, जैसे .blob { transition: border-radius .8s ease; }।
4-वैल्यू और 8-वैल्यू सिंटैक्स में क्या अंतर है?
4-वैल्यू रूप हर कोने की क्षैतिज और ऊर्ध्वाधर त्रिज्या समान रखता है, जो पिल या वृत्त के लिए काफ़ी है। 8-वैल्यू रूप क्षैतिज और ऊर्ध्वाधर त्रिज्याओं को अलग करता है, जिससे असममित जैविक आकार संभव होते हैं।
परफेक्ट सर्कल कैसे बनाऊँ?
वर्गाकार तत्व पर आठों मान 50% कर दें या बस border-radius: 50% का उपयोग करें। आप किसी वृत्त के करीब प्रीसेट से शुरू करके भी ट्यून कर सकते हैं।
क्या मेरा डेटा कहीं अपलोड होता है?
नहीं। जेनरेटर पूरी तरह आपके ब्राउज़र में शुद्ध CSS और JavaScript से चलता है। आपके द्वारा खींचा, टाइप या कॉपी किया गया कुछ भी सर्वर पर नहीं भेजा जाता।
क्या इसे गैर-वर्गाकार तत्वों पर उपयोग कर सकते हैं?
हाँ, लेकिन प्रतिशत त्रिज्या तत्व के आयामों के अनुपात में होती है, इसलिए आयत पर दीर्घवृत्तीय कोने बनेंगे और वर्गाकार प्रीव्यू से रूप अलग दिखेगा। जनरेट किए मानों को शुरुआत मानकर समायोजित करें।
बॉर्डर रेडियस जेनरेटर का उपयोग कैसे करें
आठ वैल्यू वाला border-radius अंडाकार कोनों वाले जैविक ब्लॉब आकार बनाता है जिन्हें साधारण गोल कोनों वाला आयत नहीं मिल सकता। हैंडल खींचकर आकार गढ़ें और तैयार CSS कॉपी करें — सब कुछ आपके ब्राउज़र में लाइव रेंडर होता है।
- आकार के किनारों पर रखे आठ में से किसी हैंडल को खींचें — ऊपर और नीचे के किनारों के हैंडल क्षैतिज त्रिज्याएँ तय करते हैं, और बाएँ-दाएँ के हैंडल ऊर्ध्वाधर त्रिज्याएँ।
- छह प्रीसेट वर्गों में से एक पर क्लिक करके डिज़ाइन किए आकार से शुरुआत करें, फिर क्षैतिज त्रिज्याएँ और ऊर्ध्वाधर त्रिज्याएँ के नंबर इनपुट (हर कोने के लिए एक, 0–100%) से बारीकी करें।
- रैंडम दबाकर एक क्लिक में नया जैविक आकार पाएं, या रीसेट से डिफ़ॉल्ट आकार और रंगों पर लौटें।
- आकार का रंग और पृष्ठभूमि चुनकर अपनी लक्षित पैलेट पर ब्लॉब का प्रीव्यू देखें — दोनों तुरंत अपडेट होते हैं।
- CSS कॉपी करें दबाकर नीचे की पट्टी में लाइव दिख रही border-radius डेक्लेरेशन उठाएँ और किसी भी एलिमेंट पर पेस्ट कर दें।
क्लासिक ब्लॉब लुक के लिए इस CSS को overflow: hidden के साथ किसी वर्गाकार एलिमेंट पर लगाएं; प्रतिशत में मान देने से कर्व किसी भी साइज़ में स्मूद रहता है, और सिंटैक्स में स्लैश से पहले क्षैतिज त्रिज्याएँ और बाद में ऊर्ध्वाधर त्रिज्याएँ आती हैं।
संबंधित टूल
- CSS बॉर्डर रेडियस जनरेटर विज़ुअल CSS बॉर्डर रेडियस जनरेटर। प्रत्येक कोने को स्वतंत्र रूप से समायोजित करें, रियल-टाइम प्रीव्यू देखें और CSS कोड तुरंत कॉपी करें।
- CSS ग्रेडिएंट जनरेटर विज़ुअली शानदार CSS ग्रेडिएंट बनाएं। कई रंग स्टॉप, कस्टम कोण और स्थितियों के साथ रैखिक, रेडियल और कोनिक ग्रेडिएंट उत्पन्न करें। तुरंत प्रोडक्शन-रेडी कोड कॉपी करें।
- CSS बॉक्स शैडो जनरेटर मुफ्त ऑनलाइन CSS box-shadow जनरेटर। समायोज्य ऑफसेट, ब्लर, स्प्रेड, रंग और इनसेट के साथ विज़ुअली सुंदर छायाएं बनाएं। लाइव पूर्वावलोकन और तत्काल कोड कॉपी।
- रंग पैलेट जनरेटर हमारे मुफ्त ऑनलाइन जनरेटर के साथ तुरंत सुंदर, सामंजस्यपूर्ण रंग पैलेट बनाएं। मोनोक्रोमैटिक, एनालॉगस, कॉम्प्लीमेंटरी, ट्रायडिक, स्प्लिट-कॉम्प्लीमेंटरी और टेट्राडिक मोड का समर्थन करता है। HSL स्लाइडर्स के साथ रंगों को ठीक करें, पसंदीदा को लॉक करें, और CSS, Tailwind, JSON या SVG के रूप में निर्यात करें। 100% ब्राउज़र-आधारित, आपका डेटा कभी आपका डिवाइस नहीं छोड़ता।
- रंग परिवर्तक मुफ्त ऑनलाइन रंग परिवर्तक। विज़ुअल पिकर के साथ HEX, RGB, HSL, HSV प्रारूपों को तुरंत बदलें। 100% निजी, आपके ब्राउज़र में चलता है।
- CSS ईज़िंग जनरेटर मुफ़्त ऑनलाइन CSS ईज़िंग जनरेटर। इंटरैक्टिव कर्व पर cubic-bezier कंट्रोल पॉइंट खींचें, 18 प्रीसेट में से चुनें, लूपिंग बॉल प्रीव्यू देखें और टाइमिंग फंक्शन तुरंत कॉपी करें।
- CSS टेक्स्ट शैडो जनरेटर मुफ़्त ऑनलाइन text-shadow जनरेटर। ऑफसेट, ब्लर, रंग और अस्पष्टता के साथ कई शैडो लेयर स्टैक करें, नियॉन, 3D, रेट्रो प्रीसेट आज़माएँ और CSS तुरंत कॉपी करें।
- CSS क्लिप पाथ जनरेटर मुफ़्त ऑनलाइन CSS clip-path जनरेटर। खींचने योग्य पॉइंट्स के साथ polygon, circle, ellipse और inset शेप बनाएं, लाइव प्रीव्यू देखें और एक क्लिक में CSS कोड कॉपी करें।