सीधे कंटेंट पर जाएँ
Toolars
एक्सप्लोर करें

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

CSS Background Pattern Generator

64 पृष्ठभूमि पैटर्न: 16 आकृतियाँ × चार व्यवस्थाएँ; रंग और टाइल आकार बदलें।

लोकल प्रोसेसिंग

प्रोसेसिंग का विवरण

टूल का इनपुट आपके डिवाइस पर प्रोसेस होता है।

टूल चलाने के लिए संसाधन डाउनलोड हो सकते हैं। खाता सेवाएँ अलग हैं।

गोपनीयता की जानकारी
बग रिपोर्ट करें

टास्क पथ / इनपुट से परिणाम तक

CSS बैकग्राउंड पैटर्न कैसे बनाएं

  1. 01

    पैटर्न चुनें

    ये निर्देश मूल प्रीसेट के लिए हैं; गैलरी टेम्पलेट के आकार, रंग, HTML संरचना और अवधि अलग हो सकते हैं: पैटर्न खोलें और डॉट्स, ग्रिड या डायगोनल चुनें। तीनों सिर्फ़ CSS ग्रेडिएंट से बनते हैं — किसी भी बिंदु पर कोई इमेज फ़ाइल शामिल नहीं होती। उनके बीच बदलने पर आपके टाइल, मार्क और रंग के मान बने रहते हैं, इसलिए शैलियों की तुलना मुफ़्त है। डिफ़ॉल्ट 28 px डॉट ग्रिड शुरुआत की शांत जगह है। 64 पैटर्न · रंग · अपारदर्शिता

  2. 02

    टाइल सेट करें

    टाइल साइज़ 8 से 96 px और मार्क चौड़ाई 1 से 16 px के बीच चुनें। मार्क टाइल साइज़ के आधे से ज़्यादा नहीं हो सकता; अगर होता है, तो स्थिति सटीक नियम के साथ मान जांचें दिखाती है।

  3. 03

    दोनों रंग चुनें

    पैटर्न रंग मार्क खींचता है और कैनवास रंग उनके नीचे की ज़मीन भरता है। सूक्ष्म पैटर्न दोनों के बीच कम कंट्रास्ट से बनते हैं — कैनवास से बस थोड़ा गहरा मार्क सजावट के बजाय बनावट जैसा पढ़ा जाता है।

  4. 04

    असली स्केल पर दोहराव का आकलन करें

    पूर्वावलोकन नतीजे को पूरे पैनल में टाइल करता है, और यहीं कमज़ोर कंट्रास्ट व बेचैन टाइलें खुद को बयां करती हैं। अंगूठे का नियम: मार्क को टाइल के आधे से काफ़ी नीचे रखें — 28 px टाइल पर 2 px मार्क शोर नहीं, बनावट लगता है।

  5. 05

    पैटर्न CSS कॉपी करें

    ये निर्देश मूल प्रीसेट के लिए हैं; गैलरी टेम्पलेट के आकार, रंग, HTML संरचना और अवधि अलग हो सकते हैं: toolars-background-pattern.css सहेजने के लिए CSS कॉपी करें या .css डाउनलोड करें दबाएं। .pattern नियम तीन डिक्लेरेशन हैं — background-color, background-image और background-size — किसी भी एलिमेंट के लिए तैयार।

  6. 06

    नियम लगाएं और ढालें

    नियम बिना लेआउट साइड-इफ़ेक्ट के किसी भी एलिमेंट पर बैठ जाता है, क्योंकि वह सिर्फ़ बैकग्राउंड पेंट करता है। पैटर्न घनत्व बदलने के लिए बाद में background-size समायोजित करें, और जब पैटर्न टेक्स्ट से टकराए तो मार्क सिकोड़ने के बजाय दोनों रंगों के बीच कंट्रास्ट घटाएं। HTML में वर्तमान CSS और कार्यशील उदाहरण है। मूल नियंत्रण कीबोर्ड इनपुट का समर्थन करते हैं।

टूल के तथ्य

प्रोसेसिंग
आपके ब्राउज़र में
इनपुट इस डिवाइस से बाहर जाता है
कभी नहीं
रिटेंशन
कुछ भी स्टोर नहीं होता
कीमत
मुफ़्त

आपका इनपुट ब्राउज़र में ही रहता है।

CSS बैकग्राउंड पैटर्न जनरेटर अपना सत्यापित लोकल एक्ज़ीक्यूशन पथ इस्तेमाल करता है और कोई छिपा इनपुट या आउटपुट इतिहास नहीं बनाता।

लोकल एक्ज़ीक्यूशन

मौजूदा ब्राउज़र टैब के अंदर चलता है।

कोई छिपी प्रोसेसिंग नहीं

सक्रिय टूल डेटा कभी Toolars दस्तावेज़ रिकॉर्ड नहीं बनता।

खाते की ज़रूरत नहीं

बिना प्रोफ़ाइल बनाए मुख्य वर्कफ़्लो इस्तेमाल करें। साइन इन करने के बाद फ़ेवरिट आपके खाते से सिंक होते हैं।

तुरंत रीसेट

टैब साफ़ करें और सक्रिय कार्य डेटा गायब।

CSS बैकग्राउंड पैटर्न जनरेटर असल में क्या करता है

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

आम सवाल

क्या पैटर्न सचमुच बिना इमेज के बनता है?
ये निर्देश मूल प्रीसेट के लिए हैं; गैलरी टेम्पलेट के आकार, रंग, HTML संरचना और अवधि अलग हो सकते हैं: बिल्कुल। डॉट्स एक रेडियल ग्रेडिएंट हैं, ग्रिड दो कटी हुई लीनियर ग्रेडिएंट हैं, और डायगोनल एक रिपीटिंग लीनियर ग्रेडिएंट है; background-size टाइल दोहराता है। नतीजा बिना एक भी अतिरिक्त रिक्वेस्ट के किसी भी रिज़ॉल्यूशन तक स्केल होता है। 64 पृष्ठभूमि पैटर्न: 16 आकृतियाँ × चार व्यवस्थाएँ; रंग और टाइल आकार बदलें। HTML में वर्तमान CSS और कार्यशील उदाहरण है। मूल नियंत्रण कीबोर्ड इनपुट का समर्थन करते हैं।
मेरी मार्क चौड़ाई क्यों अस्वीकार हुई?
मार्क टाइल साइज़ के आधे से ज़्यादा नहीं हो सकता — उससे आगे मार्क एक ठोस मैदान में मिल जाते हैं। मान जांचें संदेश सीमा बताता है, और मान पास होने तक कॉपी व डाउनलोड बंद रहते हैं।
क्या टाइलें बिना सीम के जुड़ेंगी?
हां। हर पैटर्न चुनी गई टाइल साइज़ पर किनारे से किनारे तक दोहराने के लिए डिज़ाइन किया गया है, और लाइव पूर्वावलोकन वही टाइल की हुई सतह दिखाता है जो एक्सपोर्ट किया गया CSS असली पेज पर बनाता है। क्योंकि दोहराव एक ही background-size मान से निकलता है, बाद में घनत्व बदलना कभी जोड़ नहीं तोड़ता।
ग्रेडिएंट में आधे-पिक्सल का गैप किस लिए है?
ये निर्देश मूल प्रीसेट के लिए हैं; गैलरी टेम्पलेट के आकार, रंग, HTML संरचना और अवधि अलग हो सकते हैं: सिर्फ बिंदु पैटर्न में चिह्न के रंग से पारदर्शिता तक आधे पिक्सेल का बदलाव होता है, चिह्न की चौड़ाई से उसमें 0.5 px जोड़ने तक। ग्रिड दो लीनियर ग्रेडिएंट और तिरछा पैटर्न रिपीटिंग लीनियर ग्रेडिएंट इस्तेमाल करते हैं; उनमें यह आधा-पिक्सेल अंतर नहीं है। पतली रेखाएं लक्षित ब्राउज़र में जांचें।
क्या मैं दो पैटर्न एक साथ परत कर सकता/सकती हूँ?
वर्कस्पेस डिज़ाइन के अनुसार प्रति नियम एक पैटर्न रचता है। CSS कॉमा से अलग background-image परतों की इजाज़त ज़रूर देता है, इसलिए कॉपी करने के बाद आप दूसरा पैटर्न हाथ से ढेर कर सकते हैं — हर परत के पारदर्शी क्षेत्र ही उन्हें मिलने देते हैं।
क्या मेरी सेटिंग्स कहीं भेजी जाती हैं?
नहीं। सब कुछ मौजूदा ब्राउज़र टैब में बिना खाते के बनता है, और कोई मान स्टोरेज, लॉग या एनालिटिक्स में नहीं जाता। डिफ़ॉल्ट डॉट्स वापस लाने के लिए रीसेट दबाएं।

संबंधित काम, कोई बंद गली नहीं।

पूरे इंडेक्स पर लौटे बिना किसी दूसरे केंद्रित वर्कस्पेस में जाएँ।

CSS चेकबॉक्स जनरेटर

CSS Checkbox Generator

24 चेकबॉक्स टेम्पलेट: आठ निशान × तीन बदलाव; मूल पूर्वावलोकन क्लिक या स्पेस से जाँचें।

बनाएँ

CSS टॉगल स्विच जनरेटर

CSS Switch Generator

18 स्विच टेम्पलेट: छह नॉब आकृतियाँ × तीन बदलाव; क्लिक या कीबोर्ड से जाँचें।

बनाएँ

CSS क्लिप पाथ जनरेटर

CSS Clip Path Generator

24 कट आकृतियाँ, आकृति विकल्प और संपादन योग्य बहुभुज बिंदु; CSS या घोषणा निर्यात करें।

बनाएँ