तेजी से और विज़ुअल तरीके से शानदार CSS प्रभाव बनाएं।
आधुनिक CSS की इंटरैक्टिव प्रयोगशाला: ग्लासमॉर्फिज़्म, परतदार शैडो, OKLab इंटरपोलेशन वाले ग्रेडिएंट, सजीव कोने और फ़िल्टर — तैयार कोड हमेशा सामने।
CSS प्लेग्राउंड
वास्तविक समय में बदलाव देखने के लिए बाईं ओर के कंट्रोल्स बदलें।
बटनकर्सर पर ज़ूम करने के लिए स्क्रॉल करें, खिसकाने के लिए खींचें, बिना स्टाइल वाले तत्व से तुलना के लिए B दबाए रखें।
PNG को उन्हीं मानों से कैनवास पर दोबारा बनाया जाता है — यह स्क्रीनशॉट नहीं है — इसलिए हर आकार में साफ़ रहता है।
.glass-card {
background: #ffffff24;
backdrop-filter: blur(16px) saturate(140%) brightness(105%);
-webkit-backdrop-filter: blur(16px) saturate(140%) brightness(105%);
border: 1px solid #ffffff38;
border-radius: 24px;
box-shadow: 0 8px 32px 0 #00000036, inset 0 1px 0 0 #ffffff38;
}मौजूदा CSS चिपकाएँ+
कोई box-shadow, ग्रेडिएंट, border-radius या filter — यहाँ तक कि पूरा नियम — चिपकाएँ और कंट्रोल अपने आप उस पर आ जाएँगे।
यह कैसे काम करता है
एक इफ़ेक्ट चुनें
ग्लास, परतदार शैडो, ग्रेडिएंट, रेडियस या फ़िल्टर — एक ही प्रीव्यू पर पाँच जनरेटर।
इसे सँवारें
स्लाइडर खींचें या सटीक संख्या टाइप करें। हर बदलाव एक अनडू की दूरी पर है।
जाँचें
कर्सर पर ज़ूम करें, इधर-उधर खिसकाएँ, और बिना स्टाइल वाले तत्व से तुलना के लिए दबाए रखें।
इसे ले जाएँ
CSS, Tailwind, SCSS या वेरिएबल कॉपी करें, लिंक साझा करें, या PNG सीधे दूसरे टूल में भेजें।
परतदार शैडो
असली ऊँचाई जितनी परतें चाहिए उतनी लगाएँ, किसी को भी बंद करें, और जो पहले से जँच रही है उसकी नकल बनाएँ।
आधुनिक रंग-स्थान
sRGB की पट्टियाँ मिटाने के लिए ग्रेडिएंट को OKLab या OKLCH में इंटरपोलेट करें, और कोई भी मान HEX, RGB, HSL या oklch() में लिखें।
अपना CSS वापस चिपकाएँ
पहले से मौजूद नियम यहाँ डालें और स्लाइडर खुद उसी पर आ जाएँगे — अंदाज़े से दोबारा बनाने की ज़रूरत नहीं।
सजीव कोने
आठ बिंदुओं वाला border-radius, जीवंत प्रीसेट ग्रिड के साथ, और ठीक मनचाही आकृति के लिए मैनुअल फ़ील्ड।
हल्का अनडू इतिहास
साठ कदमों का अनडू जो पिक्सेल नहीं, संख्याएँ रखता है — इसलिए मेमोरी नहीं भरती।
सीधे अगले टूल में
सतह को PNG में रेंडर करें और डाउनलोड फ़ोल्डर के बिना CompressSnap, CropSnap या MemeBolt को भेज दें।
कुछ भी ब्राउज़र से बाहर नहीं
न अपलोड, न खाता, न सर्वर तक चक्कर। आपकी छवि इस टैब से बाहर नहीं जाती।
कीबोर्ड के लिए बना
1–5 अंक जनरेटर बदलते हैं, Ctrl+Z पूर्ववत करता है, और Alt स्लाइडर को दस गुना बारीक करता है।
तेजी से और विज़ुअल तरीके से शानदार CSS प्रभाव बनाएं।
आधुनिक शैलियाँ बनाने का मतलब टेक्स्ट एडिटर में संख्याओं का अंदाज़ा लगाना नहीं होना चाहिए। पाँच जनरेटर एक ही लाइव प्रीव्यू साझा करते हैं: स्लाइडर या सटीक मानों से सँवारें, बिना स्टाइल वाले तत्व से तुलना करें, कुछ भी पूर्ववत करें, और नतीजा कोड, लिंक या PNG के रूप में ले जाएँ।
100% क्लाइंट-साइड प्रोसेसिंग
सभी स्टाइल आपके ब्राउज़र में स्थानीय रूप से संकलित होते हैं। कोई डेटा अपलोड नहीं किया जाता है।
फ़्रंटएंड डेवलपर्स और UI/UX डिजाइनरों के लिए परम CSS साथी।
कार्ड, बटन, बैकग्राउंड और ओवरले पैनल को जल्दी से स्टाइल करें।
आपके CSS रेसिपी निजी रहते हैं। सब कुछ आपकी स्थानीय मशीन पर होता है; हम आपके डिज़ाइन को न तो संग्रहीत करते हैं, न ट्रैक करते हैं और न अपलोड करते हैं।
अक्सर पूछे जाने वाले प्रश्न
Qक्या यह मुफ़्त है?+
हाँ, CSS Designer 100% मुफ़्त है।
Qक्या यह मोबाइल पर काम करता है?+
हाँ, यह सभी डिवाइस पर अच्छे से काम करता है।
QGlassmorphism क्या है?+
Glassmorphism एक UI ट्रेंड है जो फ्रॉस्टेड ग्लास की नकल करता है। यह रंगीन पृष्ठभूमियों पर तत्वों को खूबसूरती से ओवरले करने के लिए backdrop-filter ब्लर और अर्ध-पारदर्शी पृष्ठभूमियों का उपयोग करता है।
Qक्या यह मोबाइल पर काम करता है?+
बिल्कुल। लेआउट स्मार्टफ़ोन, टैबलेट और डेस्कटॉप पर काम करने के लिए अनुकूलित है ताकि आप चलते-फिरते कोड कर सकें।
Qक्या मैं पहले से मौजूद CSS नियम चिपका सकता हूँ?+
हाँ। कोड पैनल के नीचे "मौजूदा CSS चिपकाएँ" खोलें और कोई box-shadow, ग्रेडिएंट, border-radius या filter डाल दें; पूरा नियम भी चलेगा। कंट्रोल उन्हीं मानों पर आ जाएँगे और आप वहीं से आगे बदलाव कर सकते हैं।
QOKLab या OKLCH में इंटरपोलेट करने से क्या बदलता है?+
sRGB इंटरपोलेशन ग्रेडिएंट के बीच वाले हिस्से को एक धूसर, गंदले क्षेत्र से खींच ले जाता है। OKLab और OKLCH अनुभूत चमक को समान रखते हैं, इसलिए बैंगनी से गुलाबी का मिश्रण पूरे रास्ते चटख रहता है। तैयार CSS मानक "in oklab" वाक्यरचना का उपयोग करता है।
Qक्या PNG निर्यात एक स्क्रीनशॉट है?+
नहीं। छवि उन्हीं संख्याओं से कैनवास पर दोबारा बनाई जाती है जो प्रीव्यू इस्तेमाल करता है, इसलिए 1600×900 हो या 1080×1920, वह साफ़ रहती है और आप उसे डाउनलोड किए बिना सीधे किसी दूसरे oLoveTools टूल में भेज सकते हैं।
Qमेरी अपनी छवि जोड़ने पर क्या कुछ अपलोड होता है?+
नहीं। छवि इसी टैब में डिकोड होती है और सिर्फ़ प्रीव्यू की पृष्ठभूमि के तौर पर इस्तेमाल होती है। पैलेट निकालने का काम भी आपकी ही मशीन पर चलता है, और तभी जब आप बटन दबाते हैं।