CSS पैटर्न जेनरेटर

Q: क्या मैं पारदर्शी बैकग्राउंड इस्तेमाल कर सकता हूँ?

हाँ, Background color में `transparent` या alpha वाला rgba()/oklch() रंग डालें।

रंग, टाइल साइज़ और मोटाई के साथ शुद्ध CSS बैकग्राउंड पैटर्न बनाएं: डॉट्स, पोल्का डॉट्स, स्ट्राइप, चेकरबोर्ड, ग्रिड, ज़िगज़ैग और क्रॉसहैच। इमेज की ज़रूरत नहीं।

पैटर्न सेटिंग्स

पैटर्न

पैटर्न का रंग

बैकग्राउंड रंग

टाइल का आकारpx

डॉट की त्रिज्याpx

प्रीव्यू

CSS कोड

background-color: #ffffff;
background-image: radial-gradient(#6366f1 2px, transparent 2px);
background-size: 20px 20px;

CSS पैटर्न जेनरेटर क्या है?

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

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

Pattern चुनें: Dots, Polka dots, Stripes, Checkerboard, Grid, Zigzag या Crosshatch grid।
Pattern color और Background color सेट करें।
Tile size और मोटाई (डॉट रेडियस, स्ट्राइप चौड़ाई या रेखा चौड़ाई) एडजस्ट करें, और स्ट्राइप के लिए Angle भी।
प्रीव्यू जाँचें।
CSS कोड कॉपी करें।

उदाहरण

इनपुट

Checkerboard, tile 40px, pattern #000000 on #ffffff

आउटपुट

background-color: #ffffff;
background-image: repeating-conic-gradient(#000000 0% 25%, transparent 0% 50%);
background-size: 40px 40px;

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

CSS पैटर्न को हल्के पेज बैकग्राउंड, प्लेसहोल्डर, ग्राफ़-पेपर इफ़ेक्ट और सजावटी सेक्शन के लिए इस्तेमाल करें; वे पूरी तरह स्केल होते हैं और कोई HTTP रिक्वेस्ट नहीं लेते। जटिल या चित्रात्मक दोहराव वाली आर्टवर्क के लिए SVG टाइल ज़्यादा लचीली है।

CSS पैटर्न जेनरेटर कैसे काम करता है

हर पैटर्न एक background-color और background-size से दोहराए जाने वाले एक या अधिक ग्रेडिएंट होते हैं। Dots radial-gradient(color r, transparent r) इस्तेमाल करते हैं; polka dots background-position से दूसरी ऑफ़सेट लेयर जोड़ते हैं। Stripes हार्ड कलर स्टॉप वाला repeating-linear-gradient इस्तेमाल करते हैं; चेकरबोर्ड repeating-conic-gradient(color 0% 25%, transparent 0% 50%) इस्तेमाल करता है; ग्रिड क्षैतिज और ऊर्ध्वाधर linear ग्रेडिएंट मिलाते हैं; ज़िगज़ैग चार 45° त्रिभुजों से बनता है। मोटाई टाइल साइज़ तक सीमित है।