Skip to main content

सीएसएस बैकग्राउंड पैटर्न जनरेटर पुनरावृत्ति सीएसएस बैकग्राउंड पैटर्न बनाएं, जिसमें धारियां, चेकरबोर्ड, बिंदु और अधिक शामिल हैं।

सीएसएस बैकग्राउंड पैटर्न illustration
🎨

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

पुनरावृत्ति सीएसएस बैकग्राउंड पैटर्न बनाएं, जिसमें धारियां, चेकरबोर्ड, बिंदु और अधिक शामिल हैं।

1

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

स्ट्राइप्स, चेकरबोर्ड, डॉट्स, ग्रिड, ज़िगज़ैग या विकर्ण पैटर्न में से कोई एक चुनें।

2

रंग और आकार अनुकूलित करें

दो रंग चुनें और पैटर्न टाइल का आकार समायोजित करें।

3

सीएसएस कोड कॉपी करें

पुनरावृत्ति पैटर्न का पूर्वावलोकन करें और शुद्ध सीएसएस कोड कॉपी करें।

Loading tool...

What Is सीएसएस बैकग्राउंड पैटर्न?

सीएसएस बैकग्राउंड पैटर्न जनरेटर शुद्ध सीएसएस ग्रेडिएंट और बैकग्राउंड प्रॉपर्टीज का उपयोग करके दोहराए जाने वाले पैटर्न बनाता है-किसी भी छवि की आवश्यकता नहीं है। यह टूल छह लोकप्रिय पैटर्न प्रकार प्रदान करता है: स्ट्राइप्स (तिरछी दोहराई जाने वाली रेखाएं), चेकरबोर्ड (वैकल्पिक वर्ग), डॉट्स (पोल्का डॉट पैटर्न), ग्रिड (काटने वाली रेखाएं), ज़िगज़ैग (नुकीली लहरें), और तिरछा (पतली तिरछी रेखाएं)। प्रत्येक पैटर्न सीएसएस ग्रेडिएंट फंक्शन जैसे कि linear-gradient और radial-gradient को background-size और background-position के साथ मिलाकर टाइलिंग के लिए उपयोग किया जाता है। आप अपनी डिज़ाइन आवश्यकताओं के अनुसार दो रंगों और पैटर्न टाइल आकार को अनुकूलित कर सकते हैं। शुद्ध सीएसएस पैटर्न रेज़ोल्यूशन-स्वतंत्र, हल्के (कोई छवि डाउनलोड नहीं) और सीएसएस वेरिएबल्स के माध्यम से आसानी से अनुकूलित होते हैं।

Why Use सीएसएस बैकग्राउंड पैटर्न?

  • छह विभिन्न प्रकार के पैटर्न, सभी शुद्ध सीएसएस द्वारा बनाए गए
  • कोई छवि डाउनलोड नहीं-पैटर्न ब्राउज़र द्वारा उत्पन्न किए जाते हैं
  • रिज़ॉल्यूशन-स्वतंत्र और किसी भी प्रदर्शन घनत्व पर तेज
  • दो-रंग अनुकूलन आकार समायोजित करने योग्य

Common Use Cases

पृष्ठ पृष्ठभूमि

पृष्ठ या खंड पृष्ठभूमियों में सूक्ष्म पुनरावृत्ति पैटर्न जोड़ें।

कार्ड अलंकरण

कार्ड और पैनल के लिए सजावटी पृष्ठभूमि के रूप में पैटर्न का उपयोग करें।

खाली स्थितियाँ

दृश्य रुचि के लिए खाली स्थिति क्षेत्रों में सूक्ष्म पैटर्न भरें।

हीरो अनुभाग बनावट

बनावट वाले हीरो अनुभागों के लिए ग्रेडियंट पर पैटर्न परत करें।

Technical Guide

सीएसएस बैकग्राउंड पैटर्न ग्रेडिएंट फंक्शन का उपयोग करके सटीक background-size और background-position के साथ बनाए जाते हैं ताकि दोहराए जाने वाले, समन्वित टाइल्स बन सकें। स्ट्राइप्स में पुनरावृत्ति-linear-gradient का उपयोग वैकल्पिक रंगों के साथ किया जाता है। चेकरबोर्ड में 45 और -45 डिग्री पर चार परत वाले linear-gradients का उपयोग किया जाता है। डॉट्स में छोटे त्रिज्या और मिलान background-size के साथ radial-gradient का उपयोग किया जाता है। ग्रिड में पतली रंगों वाले दो linear-gradients (क्षैतिज और ऊर्ध्वाधर) का उपयोग किया जाता है। समन्वित पैटर्न बनाने की कुंजी यह सुनिश्चित करना है कि background-size ग्रेडिएंट गणित से मेल खाता हो। Background-position ऑफसेट अधिक जटिल व्यवस्थाओं को बना सकते हैं। ये पैटर्न GPU द्वारा रेंडर किए जाते हैं और उनका न्यूनतम प्रदर्शन प्रभाव पड़ता है। वे किसी भी रेज़ोल्यूशन पर सही से स्केल करते हैं। जटिल पैटर्न के लिए, कई बैकग्राउंड परतें अल्पविराम-सेपरेटेड background-image मानों का उपयोग करके ढेर की जाती हैं। प्रत्येक परत का अपना background-size और background-position हो सकता है।

Tips & Best Practices

  • 1
    सूक्ष्म रंग अंतर का उपयोग सुरुचिपूर्ण, विकर्षण-मुक्त पैटर्न के लिए करें
  • 2
    गहराई के लिए ठोस पृष्ठभूमि या ग्रेडियंट पर पैटर्न परत करें
  • 3
    पैटर्न घनत्व को सही बनाने के लिए आकार मापदंड़ को समायोजित करें
  • 4
    जटिल बनावट के लिए एकाधिक पैटर्न परतों को जोड़ें

Related Tools

Frequently Asked Questions

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

About This Tool

सीएसएस बैकग्राउंड पैटर्न is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.