डिज़ाइन / CSS
CSS पैटर्न जनरेटर (स्ट्राइप, डॉट, ग्रिड, चेकरबोर्ड)
केवल CSS gradients से दोहराए जाने वाले बैकग्राउंड पैटर्न बनाएँ: स्ट्राइप, तिरछी स्ट्राइप, ग्रिड लाइन, पोल्का डॉट, चेकरबोर्ड और ज़िगज़ैग। अपने दो रंग, आकार और लाइन की चौड़ाई चुनें और CSS कॉपी करें।
CSS पैटर्न जनरेटर (स्ट्राइप, डॉट, ग्रिड, चेकरबोर्ड): हर पैटर्न आपके चुने हुए आकार पर दोहराया जाने वाला एक या दो CSS gradients होता है: स्ट्राइप के लिए repeating-linear-gradient, ग्रिड के लिए एक-दूसरे को काटते हुए दो linear gradients, डॉट के लिए radial-gradient और चेकरबोर्ड के लिए repeating-conic-gradient। इसमें कोई इमेज फ़ाइल नहीं होती, इसलिए पैटर्न किसी भी zoom पर स्पष्ट रहता है और इसे लोड करने में कुछ भी खर्च नहीं होता। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।
- श्रेणी
- डेवलपर टूल्स
- रन
- आपके ब्राउज़र में
- लागत
- मुफ़्त · साइन अप की ज़रूरत नहीं
- उपलब्धता
- इस्तेमाल के लिए तैयार
पूरी तरह आपके ब्राउज़र में चलता है
CSS
.pattern {
background-color: #f2faed;
background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}हर पैटर्न केवल CSS ग्रेडिएंट से बनाया जाता है, इसलिए डाउनलोड करने के लिए कोई इमेज नहीं होती। यह किसी भी ज़ूम पर स्पष्ट रहता है और स्टाइलशीट में रंग बदले जा सकते हैं। टेक्स्ट के पीछे पैटर्न को हल्का रखें: दोनों रंगों के बीच कम कंट्रास्ट से टेक्स्ट आसानी से पढ़ा जा सकता है।
शतरंज-पट कैसे बनाया जाता है
repeating-conic-gradient(#000 0 25%, transparent 0 50%) हर tile के centre के चारों ओर एक घुमाव के पहले और तीसरे quarter को रंगता है, जिससे हर tile में दो तिरछे वर्ग बनते हैं; background-size tile को वर्ग के आकार से दोगुना रखता है।
पैटर्न मिलाना
Background images परतों में लगती हैं: किसी pattern के बाद CSS ग्रेडिएंट से मिला gradient लिखें और दोनों को comma से अलग करें; इससे pattern gradient के ऊपर दिखाई देगा।
इस्तेमाल करने का तरीका
- एक पैटर्न चुनें।
- दो रंग, दोहराव का आकार और लाइन की चौड़ाई या डॉट का आकार चुनें।
- CSS कॉपी करें।
गोपनीयता और सीमाएँ
सब कुछ आपके ब्राउज़र में चलता है।
संबंधित टूल्स
अक्सर पूछे जाने वाले सवाल
क्या ये पैटर्न हर ब्राउज़र में काम करते हैं?
हाँ: हर वर्तमान ब्राउज़र इन gradients को सपोर्ट करता है, जिसमें चेकरबोर्ड के लिए इस्तेमाल होने वाला conic gradient भी शामिल है।
मैं टेक्स्ट के पीछे पैटर्न कैसे लगाऊँ?
दो मिलते-जुलते रंग चुनें, ताकि पैटर्न हल्का बना रहे और टेक्स्ट के लिए पर्याप्त कॉन्ट्रास्ट बना रहे।
क्या मैं स्ट्राइप का कोण बदल सकता हूँ?
हाँ: कॉपी किए गए CSS में repeating-linear-gradient के अंदर कोण बदलें, जैसे 45deg की जगह 60deg।
मुफ़्त टूल · आपके ब्राउज़र में बार चलता है · अकाउंट की ज़रूरत नहीं