CSS जनरेटर

ग्रेडिएंट, बॉक्स शैडो, गोल कोने और flexbox लेआउट विज़ुअली बनाएं, फिर साफ CSS कॉपी करें।

4 टूल

CSS ग्रेडिएंट जनरेटरजितने चाहें कलर स्टॉप के साथ लीनियर, रेडियल और कोनिक CSS ग्रेडिएंट बनाएँ। लाइव प्रीव्यू, प्रीसेट और रैंडम आइडि CSS बॉक्स शैडो जनरेटरकई लेयर, इनसेट शैडो, ब्लर, स्प्रेड और रंग के साथ CSS बॉक्स शैडो विज़ुअली डिज़ाइन करें। लाइव प्रीव्यू, CSS, SCS CSS बॉर्डर रेडियस जनरेटरगोल कोने विज़ुअली सेट करें: सभी कोनों को साथ जोड़ें या हर एक अलग बदलें, px या % में, सर्कल और ऑर्गेनिक आकृतिया CSS फ़्लेक्सबॉक्स जनरेटरफ़्लेक्सबॉक्स लेआउट विज़ुअली बनाएँ: डायरेक्शन, रैप, justify-content, align-items, gap और हर आइटम का ग्रो। हेडर

CSS टूल के बारे में

CSS को देखकर लिखें, अंदाज़े से नहीं

कुछ CSS प्रॉपर्टी पढ़ने में आसान हैं पर कल्पना करना मुश्किल। बॉक्स शैडो में पांच मान होते हैं, ग्रेडिएंट को कोण और कलर स्टॉप चाहिए, और flexbox अलाइनमेंट हर प्रॉपर्टी के साथ बदल जाता है। ये CSS जनरेटर आपको स्लाइडर खिसकाने, नतीजा तुरंत देखने और हर आधुनिक ब्राउज़र में चलने वाला कोड कॉपी करने देते हैं।

आपको कौन सा CSS जनरेटर चाहिए?

बैकग्राउंड और बटन: CSS ग्रेडिएंट जनरेटर जितने चाहें उतने कलर स्टॉप के साथ लीनियर और रेडियल ग्रेडिएंट बनाता है।
गहराई और कार्ड: बॉक्स शैडो जनरेटर ऑफ़सेट, ब्लर, स्प्रेड, रंग और इनसेट शैडो सेट करता है, परतदार शैडो सहित।
गोल कोने और आकार: बॉर्डर रेडियस जनरेटर पिल बटन, कार्ड और ऑर्गेनिक आकार के लिए हर कोना अलग से नियंत्रित करता है।
लेआउट: flexbox जनरेटर कोड लिखने से पहले दिखाता है कि direction, wrap, justify और align आपके आइटम को कैसे खिसकाते हैं।

साफ CSS के सुझाव

शैडो हल्की रखें: कम ओपेसिटी और ज़्यादा ब्लर गहरे, तीखे किनारे से ज़्यादा प्राकृतिक लगते हैं।
ग्रेडिएंट पर टेक्स्ट का कंट्रास्ट उसके सबसे हल्के हिस्से पर जांचें, बीच में नहीं।
रेडियस और शैडो जैसे दोहराए जाने वाले मान CSS कस्टम प्रॉपर्टी में रखें ताकि डिज़ाइन एक जैसा रहे।

सभी जनरेटर आपके ब्राउज़र में चलते हैं, मुफ़्त हैं और अकाउंट नहीं मांगते। मेल खाते रंगों के लिए कलर पैलेट जनरेटर आज़माएं।