CSS जनरेटर

लाइव पूर्वावलोकन के साथ बॉक्स शैडो, clip-path, cubic-bezier ईज़िंग और ग्लासमॉर्फ़िज़्म
  • फ़ाइलें आपके डिवाइस से बाहर नहीं जातीं
  • ब्राउज़र में चलता है
  • मुफ़्त, बिना खाते, बिना वॉटरमार्क
16px

Tailwind (arbitrary value)

shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]

CSS जनरेटर का उपयोग कैसे करें

लाइव पूर्वावलोकन के साथ CSS दृश्य रूप से बनाएँ: बॉक्स शैडो, क्लिप पथ, क्यूबिक बेज़ियर ईज़िंग, ग्लासमॉर्फ़िज़्म, ब्लॉब बॉर्डर त्रिज्या और पाठ छाया। हर जनरेटर सादा CSS और Tailwind मनमाना-मान क्लास देता है, कॉपी करने के लिए तैयार।

  1. 1

    जनरेटर चुनें: बॉक्स शैडो, क्लिप पथ, क्यूबिक बेज़ियर, ग्लासमॉर्फ़िज़्म, ब्लॉब त्रिज्या या पाठ छाया।

  2. 2

    प्रीसेट से शुरू करें, या स्लाइडर और रंग समायोजित करें।

  3. 3

    जहाँ उपलब्ध हो पूर्वावलोकन पर सीधे खींचें: clip-path बिंदु, दो बेज़ियर हैंडल, या ब्लॉब हैंडल।

  4. 4

    नीचे आउटपुट से CSS या Tailwind क्लास कॉपी करें।

अक्सर पूछे जाने वाले प्रश्न

क्या मैं कई छायाएँ एक पर एक रख सकता हूँ?

हाँ। बॉक्स शैडो में परत जोड़ें पर क्लिक करके परतें मिलाएँ, हर एक अपने ऑफ़सेट, धुंधलापन, फैलाव, रंग, अपारदर्शिता और इनसेट के साथ।

क्लिप पथ पर बिंदु कैसे जोड़ूँ या हटाऊँ?

बिंदु जोड़ने के लिए आकृति किनारे पर डबल-क्लिक करें; बिंदु चुनें और हटाने के लिए Delete दबाएँ। वृत्त, दीर्घवृत्त और इनसेट आकृतियाँ स्लाइडर उपयोग करती हैं।

काँच का प्रभाव मुझे क्यों नहीं दिखता?

backdrop-filter केवल तत्व के पीछे जो है उसे धुंधला करता है, इसलिए रंगीन या व्यस्त पृष्ठभूमि चाहिए। आउटपुट में Safari के लिए -webkit- उपसर्ग शामिल है।

0–1 के बाहर बेज़ियर मान क्या करते हैं?

1 से ऊपर या 0 से नीचे Y मान गति को आगे बढ़ा देते हैं, जिससे उछाल या पूर्व-प्रत्याशा प्रभाव मिलता है। रैखिक गति से तुलना के लिए चलाएँ दबाएँ।

क्या Tailwind आउटपुट को प्लगइन चाहिए?

नहीं। यह Tailwind का मनमाना-मान सिंटैक्स उपयोग करता है, जैसे rounded-[…] या [clip-path:…], जो मानक Tailwind में चलता है।