10 सीएसएस पृष्ठभूमि पैटर्न जो आप अपनी वेबसाइट पर उपयोग कर सकते हैं

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

नीचे 10 पृष्ठभूमि पैटर्न की सूची दी गई है जिनका उपयोग आप अपनी परियोजनाओं में कर सकते हैं।

1. काला षट्भुज

इन उदाहरणों में कोड a. में उपलब्ध है गिटहब भंडार और आपके लिए के तहत उपयोग करने के लिए स्वतंत्र है एमआईटी लाइसेंस.

यह काला षट्भुज पैटर्न एक बहुत साफ षट्भुज नेटवर्क पृष्ठभूमि प्रदान करता है। इस पृष्ठभूमि में शीर्षक स्पष्ट रूप से दिखाई देता है। यदि आप कोई तकनीकी या वास्तु वेबसाइट डिजाइन कर रहे हैं तो आप इस पैटर्न का उपयोग कर सकते हैं।

HTML कोड

<एच 1>काला षट्भुज</h1>

सीएसएस कोड

तन {
 फुहारा परिवार: 'शेयर टेक', सान्स सेरिफ़;
 फ़ॉन्ट-आकार: 68px;
 रंग सफेद;
 प्रदर्शन: फ्लेक्स;
 jsutify-सामग्री: केंद्र;
 संरेखित-आइटम: केंद्र;
 मार्जिन: 0;
 चौड़ाई: 100 वीडब्ल्यू;
 ऊंचाई: 100 वीएच;
 पाठ की छाया: 8पिक्सल 8पिक्सल 10पिक्सल #0000008सी;
 पीछे का रंग: #343ए40;
 पृष्ठभूमि-छवि: यूआरएल ("डेटा: छवि/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg

instagram viewer

' चौड़ाई ='28' ऊंचाई ='49' व्यूबॉक्स ='0 0 28 49'%3E%3Cg भरण-नियम='और भी अजीब'%3E%3Cg आईडी='षट्भुज' भरना ='%239C92AC' भरण-अस्पष्टता ='0.25' भरण-नियम ='अशून्य'%3E%3Cपथ d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), रैखिक-ढाल (दाएं शीर्ष पर, #343a40, #2b2c31, #211f22, #151314, #000000);
}
एच1 {
 मार्जिन: 20px;
}

2. ब्लू स्ट्रिप्स

नीली पट्टी पृष्ठभूमि पैटर्न का उपयोग करता है रैखिक ढलान पृष्ठभूमि पर ग्रेडिएंट स्ट्रिप्स बनाने के लिए CSS गुण। तुम कर सकते हो पृष्ठभूमि का रंग बदलें और आपकी आवश्यकताओं को पूरा करने के लिए ढाल का रंग।

HTML कोड

<डिव क्लास ="पैटर्न पीटी1"></div>

सीएसएस कोड

तन {
 मार्जिन: 0px;
}
.पैटर्न {
 चौड़ाई: 100 वीडब्ल्यू;
 ऊंचाई: 100 वीडब्ल्यू;
}
.पीटी1 {
 पृष्ठभूमि का आकार: 50px 50px;
 पीछे का रंग: #0ae;
पृष्ठभूमि छवि: -वेबकिट-रैखिक-ढाल(आरजीबीए(255, 255, 255, .2) 50%, पारदर्शी 50%, पारदर्शी);
पृष्ठभूमि छवि: -मोज़-रैखिक-ढाल(आरजीबीए(255, 255, 255, .2) 50%, पारदर्शी 50%, पारदर्शी);
पृष्ठभूमि छवि: -एमएस-रैखिक-ढाल(आरजीबीए(255, 255, 255, .2) 50%, पारदर्शी 50%, पारदर्शी);
पृष्ठभूमि छवि: -ओ-रैखिक-ढाल(आरजीबीए(255, 255, 255, .2) 50%, पारदर्शी 50%, पारदर्शी);
पृष्ठभूमि छवि: रैखिक ढलान(आरजीबीए(255, 255, 255, .2) 50%, पारदर्शी 50%, पारदर्शी);
}

3. शतरंज बोर्ड

आप CSS का उपयोग करके आसानी से एक बिसात पृष्ठभूमि डिज़ाइन पैटर्न बना सकते हैं। इस डिज़ाइन को बदलने के लिए रंगों को समायोजित करने का प्रयास करें।

HTML कोड

<डिव क्लास ="पैटर्न पीटी1"></div>

सीएसएस कोड

तन {
 मार्जिन: 0px;
}
.पैटर्न {
 चौड़ाई: 100 वीडब्ल्यू;
 ऊंचाई: 100 वीडब्ल्यू;
}
.पीटी1 {
 पीछे का रंग: #ईई;
 पृष्ठभूमि का आकार: 60px 60px;
 पृष्ठभूमि-स्थिति: 0 0, 30px 30px;
 पृष्ठभूमि-छवि: -वेबकिट-रैखिक-ढाल (45 डिग्री, काला 25%, पारदर्शी 25%, पारदर्शी 75%, काला 75%, काला), -वेबकिट-रैखिक-ढाल (45 डिग्री, काला 25%, पारदर्शी 25%, पारदर्शी 75%, काला 75%, काला);
 पृष्ठभूमि-छवि: -मोज़-रैखिक-ढाल (45 डिग्री, काला 25%, पारदर्शी 25%, पारदर्शी 75%, काला 75%, काला), -मोज़-रैखिक-ढाल (45 डिग्री, काला 25%, पारदर्शी 25%, पारदर्शी 75%, काला 75%, काला);
 पृष्ठभूमि-छवि: -एमएस-रैखिक-ढाल (45 डिग्री, काला 25%, पारदर्शी 25%, पारदर्शी 75%, काला) 75%, काला), -एमएस-रैखिक-ढाल (45 डिग्री, काला 25%, पारदर्शी 25%, पारदर्शी 75%, काला 75%, काला);
 पृष्ठभूमि-छवि: -ओ-रैखिक-ढाल (45 डिग्री, काला 25%, पारदर्शी 25%, पारदर्शी 75%, काला 75%, काला), -ओ-रैखिक-ढाल (45 डिग्री, काला 25%, पारदर्शी 25%, पारदर्शी 75%, काला 75%, काला);
 पृष्ठभूमि-छवि: रैखिक-ढाल (45 डिग्री, काला 25%, पारदर्शी 25%, पारदर्शी 75%, काला 75%, काला), रैखिक-ढाल (45 डिग्री, काला 25%, पारदर्शी 25%, पारदर्शी 75%, काला 75%, काला);
}

4. मौन सागर

आप किसी भी HTML तत्व में एक स्थिर पृष्ठभूमि जोड़ने के लिए इन सरल क्षैतिज रेखा पैटर्न का उपयोग कर सकते हैं।

HTML कोड

<डिव क्लास ="पैटर्न पीटी1"></div>

सीएसएस कोड

तन {
 मार्जिन: 0px;
}
.पैटर्न {
 चौड़ाई: 100 वीडब्ल्यू;
 ऊंचाई: 100 वीडब्ल्यू;
}
.पीटी1 {
 पीछे का रंग: #026873;
 पृष्ठभूमि-आकार: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
पृष्ठभूमि छवि: -वेबकिट-रैखिक-ढाल(0, आरजीबीए(255, 255, 255, .07) 50%, पारदर्शी 50%), -वेबकिट-रैखिक-ढाल(0, आरजीबीए(255, 255, 255, .13) 50%, पारदर्शी 50%), -वेबकिट-रैखिक-ढाल(0, पारदर्शी 50%, आरजीबीए(255, 255, 255, .17) 50%), -वेबकिट-रैखिक-ढाल(0, पारदर्शी 50%, आरजीबीए(255, 255, 255, .19) 50%);
पृष्ठभूमि छवि: -मोज़-रैखिक-ढाल(0, आरजीबीए(255, 255, 255, .07) 50%, पारदर्शी 50%), -मोज़-रैखिक-ढाल(0, आरजीबीए(255, 255, 255, .13) 50%, पारदर्शी 50%), -मोज़-रैखिक-ढाल(0, पारदर्शी 50%, आरजीबीए(255, 255, 255, .17) 50%), -मोज़-रैखिक-ढाल(0, पारदर्शी 50%, आरजीबीए(255, 255, 255, .19) 50%);
पृष्ठभूमि छवि: -एमएस-रैखिक-ढाल(0, आरजीबीए(255, 255, 255, .07) 50%, पारदर्शी 50%), -एमएस-रैखिक-ढाल(0, आरजीबीए(255, 255, 255, .13) 50%, पारदर्शी 50%), -एमएस-रैखिक-ढाल(0, पारदर्शी 50%, आरजीबीए(255, 255, 255, .17) 50%), -एमएस-रैखिक-ढाल(0, पारदर्शी 50%, आरजीबीए(255, 255, 255, .19) 50%);
पृष्ठभूमि छवि: -ओ-रैखिक-ढाल(0, आरजीबीए(255, 255, 255, .07) 50%, पारदर्शी 50%), -ओ-रैखिक-ढाल(0, आरजीबीए(255, 255, 255, .13) 50%, पारदर्शी 50%), -ओ-रैखिक-ढाल(0, पारदर्शी 50%, आरजीबीए(255, 255, 255, .17) 50%), -ओ-रैखिक-ढाल(0, पारदर्शी 50%, आरजीबीए(255, 255, 255, .19) 50%);
पृष्ठभूमि छवि: रैखिक ढलान(0, आरजीबीए(255, 255, 255, .07) 50%, पारदर्शी 50%), रैखिक ढलान(0, आरजीबीए(255, 255, 255, .13) 50%, पारदर्शी 50%), रैखिक ढलान(0, पारदर्शी 50%, आरजीबीए(255, 255, 255, .17) 50%), रैखिक ढलान(0, पारदर्शी 50%, आरजीबीए(255, 255, 255, .19) 50%);
}

5. आधुनिक ईंट

आप का उपयोग करके एक शुद्ध सीएसएस आधुनिक ईंट पैटर्न बना सकते हैं रैखिक ढलान सीएसएस संपत्ति।

सीएसएस कोड

तन {
 पृष्ठभूमि-छवि: रैखिक-ढाल (45 डिग्री, पारदर्शी 20%, काला 25%, पारदर्शी 25%),
 रैखिक-ढाल (-45 डिग्री, पारदर्शी 20%, काला 25%, पारदर्शी 25%),
 रैखिक-ढाल (-45 डिग्री, पारदर्शी 75%, काला 80%, पारदर्शी 0),
 रेडियल-ग्रेडिएंट (ग्रे 2px, पारदर्शी 0);
 पृष्ठभूमि का आकार: 30px 30px, 30px 30px;
}

6. Web3 शैली पृष्ठभूमि

आप एक बना सकते हैं वेब3-स्टाइल बैकग्राउंड एक बैकग्राउंड इमेज का उपयोग करके और इसमें ब्लर इफेक्ट जोड़ रहा है। यह उदाहरण Unsplash से आकाशगंगा छवि का उपयोग करता है। आप रचनात्मक हो सकते हैं और आकाशगंगा, समुद्र, स्मारकों, या किसी अन्य चीज़ की छवि का उपयोग कर सकते हैं।

HTML कोड

<डिव क्लास ="कार्ड बीजी-धुंधला">
<एच 1>ग्रेडिएंट बैकग्राउंड वाला कार्ड</h1>
</div>

सीएसएस कोड

:जड़ {
 --bg-छवि: url ('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ऑटो = प्रारूप&फिट = फसल&डब्ल्यू = 1169&क्यू = 80');
}
तन {
 पीछे का रंग: #1D1E22;
 फ़ॉन्ट-परिवार: सेन्स-सेरिफ़;
 प्रदर्शन: फ्लेक्स;
}
कार्ड {
 मार्जिन: ऑटो;
 गद्दी: 1rem;
 ऊंचाई: 300 पीएक्स;
 चौड़ाई: 300 पीएक्स;
 पाठ-संरेखण: केंद्र;
 रंग सफेद;
 प्रदर्शन: फ्लेक्स;
 संरेखित-आइटम: केंद्र;
 औचित्य-सामग्री: केंद्र;
 स्थिति: रिश्तेदार;
 पृष्ठभूमि-रंग: ग्रे;
 सीमा-त्रिज्या: 10px;
}
.bg-धुंधला {
 ओवर फलो हिडेन;
 पृष्ठभूमि-रंग: पारदर्शी;
}
.bg-धुंधला::इससे पहले {
 विषय: '';
 पृष्ठभूमि छवि: वर(--बीजी-छवि);
 पृष्ठभूमि-आकार: कवर;
 ऊंचाई: 100%;
 चौड़ाई: 100%;
 स्थिति: निरपेक्ष;
 फ़िल्टर: धुंधला (30px);
 जेड-इंडेक्स: -1;
}

7. ग्रेडिएंट बैकग्राउंड एनिमेशन

ढाल पृष्ठभूमि आधुनिक वेबसाइटों में एनिमेशन का व्यापक रूप से उपयोग किया जाता है। चलन में रहें और पृष्ठभूमि के साथ ग्रेडिएंट एनिमेशन का उपयोग करें। आप अपनी आवश्यकताओं के अनुसार ढाल के रंगों को भी अनुकूलित कर सकते हैं।

HTML कोड

<डिव क्लास ="डी-फ्लेक्स फ्लेक्स-कॉलम जस्टिफाई-कंटेंट-सेंटर w-100 h-100"></div>

सीएसएस कोड

तन {
पार्श्वभूमि: रैखिक ढलान(-45डिग्री, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 पृष्ठभूमि का आकार: 400% 400%;
 ऐनिमेशन: ग्रेडिएंट 15 एस ईज़ इनफिनिट;
 ऊंचाई: 100 वीएच;
}
@कीफ़्रेम ढाल {
 0% {
 पृष्ठभूमि-स्थिति: 0% 50%;
 }
50% {
 पृष्ठभूमि-स्थिति: 100% 50%;
 }
100% {
 पृष्ठभूमि-स्थिति: 0% 50%;
 }
}

8. सुडौल लहरें

आप का उपयोग करके एक साधारण सुडौल तरंग पैटर्न बना सकते हैं रेडियल-ग्रेडिएंट सीएसएस संपत्ति।

HTML कोड

<डिव क्लास ="पैटर्न पीटी1"></div>

सीएसएस कोड

तन {
 मार्जिन: 0px;
}
.पैटर्न {
 चौड़ाई: 100 वीडब्ल्यू;
 ऊंचाई: 100 वीडब्ल्यू;
}
.पीटी1 {
पार्श्वभूमि: -मोज-रेडियल-ढाल(0% 2%, घेरा, आरजीबीए(96, 16, 48, 0) 9पिक्सल, #661133 10पिक्सल, आरजीबीए(96, 16, 48, 0) 11पिक्सल), -मोज-रेडियल-ढाल(100% 100%, आरजीबीए(96, 16, 48, 0) 9पिक्सल, #661133 10पिक्सल, आरजीबीए(96, 16, 48, 0) 11पिक्सल), कोई भी नहीं;
पार्श्वभूमि: -वेबकिट-रेडियल-ढाल(0% 2%, घेरा, आरजीबीए(96, 16, 48, 0) 9पिक्सल, #661133 10पिक्सल, आरजीबीए(96, 16, 48, 0) 11पिक्सल), -वेबकिट-रेडियल-ढाल(100% 100%, आरजीबीए(96, 16, 48, 0) 9पिक्सल, #661133 10पिक्सल, आरजीबीए(96, 16, 48, 0) 11पिक्सल), कोई भी नहीं;
पार्श्वभूमि: -एमएस-रेडियल-ढाल(0% 2%, घेरा, आरजीबीए(96, 16, 48, 0) 9पिक्सल, #661133 10पिक्सल, आरजीबीए(96, 16, 48, 0) 11पिक्सल), -एमएस-रेडियल-ढाल(100% 100%, आरजीबीए(96, 16, 48, 0) 9पिक्सल, #661133 10पिक्सल, आरजीबीए(96, 16, 48, 0) 11पिक्सल), कोई भी नहीं;
पार्श्वभूमि: -ओ-रेडियल-ढाल(0% 2%, घेरा, आरजीबीए(96, 16, 48, 0) 9पिक्सल, #661133 10पिक्सल, आरजीबीए(96, 16, 48, 0) 11पिक्सल), -ओ-रेडियल-ढाल(100% 100%, आरजीबीए(96, 16, 48, 0) 9पिक्सल, #661133 10पिक्सल, आरजीबीए(96, 16, 48, 0) 11पिक्सल), कोई भी नहीं;
पार्श्वभूमि: रेडियल-ग्रेडिएंट(0% 2%, घेरा, आरजीबीए(96, 16, 48, 0) 9पिक्सल, #661133 10पिक्सल, आरजीबीए(96, 16, 48, 0) 11पिक्सल), रेडियल-ग्रेडिएंट(100% 100%, आरजीबीए(96, 16, 48, 0) 9पिक्सल, #661133 10पिक्सल, आरजीबीए(96, 16, 48, 0) 11पिक्सल), कोई भी नहीं;
 पृष्ठभूमि का आकार: 20px 20px;
}

9. टेबल क्लॉथ

अपने HTML div के लिए एक मानक पृष्ठभूमि पैटर्न की आवश्यकता है? इस टेबल क्लॉथ पैटर्न को आजमाएं।

सीएसएस कोड

तन {
 पृष्ठभूमि: सफेद;
पृष्ठभूमि छवि: रैखिक ढलान(90डिग्री, आरजीबीए(200,0,0,.5) 50%, पारदर्शी 0),
रैखिक ढलान(आरजीबीए(200,0,0,.5) 50%, पारदर्शी 0);
 पृष्ठभूमि का आकार: 30px 30px;
}

10. स्लाइडिंग विकर्ण

इस प्रभाव में, विकर्ण रंग एक दूसरे के साथ स्लाइड और ओवरलैप करते हैं। रंगों को मिलाने का सहज एनिमेशन आपकी वेबसाइट पर एक आकर्षक स्पर्श जोड़ सकता है।

HTML कोड

<डिव क्लास ="बीजी"></div>
<डिव क्लास ="बीजी बीजी2"></div>
<डिव क्लास ="बीजी बीजी3"></div>
<डिव क्लास ="विषय">
<एच 1>स्लाइडिंग विकर्ण पृष्ठभूमि प्रभाव</h1>
</div>

सीएसएस कोड

एचटीएमएल {
ऊंचाई:100%;
}
तन {
अंतर:0;
}
.बीजी {
एनीमेशन:फिसल पट्टी 3एसआराम से बाहरअनंतएकांतर;
पृष्ठभूमि छवि: रैखिक ढलान(-60 डिग्री, #6c3 50%, #09f 50%);
नीचे:0;
बाएं:-50%;
अस्पष्टता:.5;
पद:हल किया गया;
सही:-50%;
ऊपर:0;
Z- सूचकांक:-1;
}
.bg2 {
एनिमेशन-दिशा: वैकल्पिक-उल्टा;
एनिमेशन-अवधि:4s;
}
.bg3 {
एनिमेशन-अवधि:5s;
}
।विषय {
पीछे का रंग: आरजीबीए (255 .),255,255,.8);
बॉर्डर-त्रिज्या:.25em;
डब्बे की छाया:0 0 .25emआरजीबीए(0,0,0,.25);
बॉक्स आकार:बॉर्डर-बॉक्स;
बाएं:50%;
गद्दी:10vmin;
पद:हल किया गया;
पाठ संरेखित:केंद्र;
ऊपर:50%;
परिवर्तनअनुवाद (-50 .)%, -50%);
}
एच1 {
फुहारा परिवार: मोनोस्पेस;
}
@कीफ़्रेम फिसल पट्टी {
 0% {
परिवर्तन:translateX(-25%);
 }
100% {
परिवर्तन:translateX(25%);
 }
}

CSS का उपयोग करके अपनी वेबसाइट को बेहतर बनाएं

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

8 आवश्यक सीएसएस टिप्स और ट्रिक्स हर डेवलपर को पता होना चाहिए

आगे पढ़िए

लेखक के बारे में