अवलोकन

CSS पैटर्न जनरेटर शुद्ध CSS ग्रेडिएंट का उपयोग कर दोहराने वाले पृष्ठभूमि डिज़ाइन — धारियाँ, बिंदु, ग्रिड, चेक और अधिक — बिना किसी छवि फ़ाइल के बनाता है। चूँकि पैटर्न कोड है, यह किसी भी आकार में तीक्ष्ण, फ़ाइल-भार में अत्यल्प, और आसानी से पुनः-रंगने योग्य है। यह टूल आपको एक पैटर्न को दृश्य रूप से समायोजित करने देता है और सटीक CSS कॉपी करता है, ताकि आप सेकंडों में किसी पेज पर एक साफ़ पृष्ठभूमि डाल सकें।

कैसे उपयोग करें (चरण-दर-चरण)

1. 1

   एक पैटर्न प्रकार चुनें

   शुरुआती बिंदु के रूप में एक आधार शैली चुनें — धारियाँ, बिंदु, ग्रिड, शतरंज।

2. 2

   रंग और स्केल समायोजित करें

   जबकि पूर्वावलोकन लाइव अपडेट होता है, रंग, अंतराल और कोण सेट करें।

3. 3

   CSS कॉपी करें

   उत्पन्न पृष्ठभूमि CSS को अपने तत्व पर चिपकाएँ — किसी छवि फ़ाइल की आवश्यकता नहीं।

यह कैसे काम करता है

जनरेटर CSS ग्रेडिएंट (रैखिक और रेडियल) को background-size के साथ मिलाकर एक टाइल बनाता है जो निर्बाध रूप से दोहराती है। आप नियंत्रणों से रंग, अंतराल, कोण और पैटर्न प्रकार समायोजित करते हैं जबकि लाइव पूर्वावलोकन अपडेट होता है। चूँकि सब ग्रेडिएंट है, ब्राउज़र किसी छवि के HTTP अनुरोध के बिना पैटर्न बनाता है, और किसी भी स्क्रीन पर तीक्ष्ण रूप से स्केल करता है। टूल चिपकाने-योग्य CSS देता है।

कब उपयोगी है

किसी सेक्शन या हीरो में एक सूक्ष्म बनावटी पृष्ठभूमि जोड़ना। किसी पृष्ठभूमि छवि को हल्के, स्केलेबल CSS से बदलना। ऐसा ब्रांड पैटर्न बनाना जिसे थीम से मिलाने हेतु पुनः-रंगा जा सके। ऐसा दोहराने वाला डिज़ाइन बनाना जो हाई-DPI स्क्रीन पर तीक्ष्ण रहे। डिज़ाइन टूल खोले बिना पृष्ठभूमियों का प्रोटोटाइप बनाना। सीखना कि CSS ग्रेडिएंट कैसे दोहराने वाले पैटर्न बनाते हैं।

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