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

CSS पृष्ठभूमि पैटर्न

एक CSS background pattern एक टाइल की गई छवि है (धारियाँ, बिंदु, ग्रिड, चेकरबोर्ड, त्रिकोण) पूरी तरह से CSS gradient functions के साथ बनाई गई और बिना किसी image file के। तीन properties सारा काम करती हैं: background-image element में किसी भी gradient image को paint करता है, background-size उस image की एक टाइल का आकार सेट करता है, और background-repeat (जो default repeat है) उस image को दोनों axes पर टाइल करता है। background-position फिर seam को offset करता है ताकि प्रत्येक layer की टाइल दूसरों के साथ संरेखित हो। एक pattern इसलिए केवल कई gradient images एक के ऊपर एक स्टैक की हुई हैं, प्रत्येक को एक ही टाइल के आकार में, प्रत्येक को आपस में जुड़ने के लिए स्थापित किया गया है। Browsers comma-separated background-image values को आगे से पीछे की ओर paint करते हैं, इसलिए list में पहली image दूसरी के ऊपर बैठती है, दूसरी तीसरी के ऊपर, और इसी तरह।

पूरा genre एक syntactic चाल की वजह से मौजूद है: hard color stops। एक ही position पर निकटवर्ती color stops एक blend के बजाय एक तत्क्षण transition उत्पन्न करते हैं। linear-gradient(red 50%, blue 50%) लाल से नीले में फीका नहीं है (यह एक तीखी रेखा है। बिना hard stops के आपको एक चिकना gradient मिलता है; उनके साथ आपको ज्यामिति मिलती है। धारियाँ, बिंदु, चेकर्स, त्रिकोण, शेवरॉन) हर pattern जो यह उपकरण उत्सर्जित करता है उस एक property से बना है, अलग-अलग कोणों और टाइल आकारों पर लागू।

एक संक्षिप्त इतिहास, Lea Verou और Patterns Gallery

यदि एक संसाधन पूर्ण-CSS background patterns के पूरे genre के लिए जिम्मेदार है, तो वह Lea Verou द्वारा CSS3 Patterns Gallery है, जो मूल रूप से lea.verou.me/css3patterns/ पर hosted थी। Verou 2010 भर और 2011 की शुरुआत में individual demos पोस्ट कर रही थीं, जिसमें फरवरी 2011 में एक प्रसिद्ध checkerboard walkthrough शामिल था, इससे पहले कि उन्होंने 15 अप्रैल 2011 को «CSS3 patterns gallery and a new pattern» शीर्षक वाली पोस्ट में gallery का आधिकारिक रूप से उद्घाटन किया (नया pattern एक Japanese-cubes design था जिसे उन्होंने अब तक का सबसे कठिन बनाया हुआ बताया)। कुछ महीने बाद, 1 दिसंबर 2011 को, उन्होंने 24 ways advent calendar के लिए canonical «CSS3 Patterns, Explained» निबंध लिखा, हर धारी, polka dot और checkerboard pattern के अंतर्गत आने वाली hard-color-stop तकनीक की अब तक की सबसे बेहतरीन सादी-भाषा व्याख्या। जून 2015 में O’Reilly ने उनकी पुस्तक CSS Secrets: Better Solutions to Everyday Web Design Problems प्रकाशित की, जिसने patterns chapter को एक पूर्ण taxonomy तक विस्तारित किया। Gallery के व्यापक सांस्कृतिक प्रभाव को Verou के अपने project notes में दर्ज किया गया है: इसने «आसानी से background patterns और अन्य graphics बनाने के लिए CSS gradients में hard stops का उपयोग करने की व्यापक प्रथा शुरू की» और बाद में Opera Software के engineers द्वारा अपने gradients implementation को सूक्ष्म-समायोजित करने के लिए उपयोग किया गया।

Vendor prefix से specification तक

CSS gradients CSS Image Values and Replaced Content Module Level 3 (आमतौर पर «CSS Images 3») में परिभाषित हैं, W3C CSS Working Group द्वारा बनाए रखा गया और अन्य लोगों के बीच Tab Atkins Jr. और Elika J. Etemad द्वारा संपादित। First Public Working Draft 12 जुलाई 2011 था; spec ने अप्रैल 2012 में Candidate Recommendation तक पहुँच कर modern unprefixed syntax को ताला लगा दिया, इसमें यह सम्मेलन शामिल है कि 0deg ऊपर की ओर इशारा करता है और to right 90deg के बराबर है। Browser shipping क्रम: WebKit बहुत बड़े अंतर से पहला था, Safari 4 (2009) में -webkit-gradient() उपयोगी; Firefox ने Firefox 3.6 (21 जनवरी 2010) में -moz-linear-gradient() भेजा; Internet Explorer 10 ने 2012 में unprefixed forms भेजे; unprefixed syntax 2013 के अंत तक सभी प्रमुख engines में स्थिर हो गया। conic-gradient() को CSS Images Level 4 में specified किया गया क्योंकि syntax design करते समय Level 3 पहले ही Last Call में प्रवेश कर चुका था; इसे Chrome 69 (4 सितंबर 2018), Safari 12.1 (25 मार्च 2019) और Firefox 83 (17 नवंबर 2020) में shipped किया गया। 2026 में आप किसी भी समर्थन योग्य browser के लिए बिना prefix और बिना fallbacks के background: linear-gradient(...) और background: conic-gradient(...) आत्मविश्वास से लिख सकते हैं।

linear-gradient: कोण और भुजाएँ

औपचारिक grammar linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...) है। कोण सम्मेलन developers को अक्सर गलती करवाता है क्योंकि यह SVG/canvas सम्मेलन से अलग है। 0deg to top के बराबर है (gradient line ऊपर की ओर इशारा करती है, इसलिए अंतिम रंग box के ऊपर दिखाई देता है)। 90deg to right के बराबर है। 180deg to bottom के बराबर है (अगर कोई दिशा नहीं दी जाती तो default)। 270deg to left के बराबर है। बढ़ते कोण ऊपर से दक्षिणावर्त घूमते हैं, गणितीय सम्मेलन का विपरीत (जहाँ 0 दाहिने ओर है और कोण वामावर्त बढ़ते हैं) और SVG के <linearGradient> का विपरीत। एक उपयोगी सूक्ष्मता: to right और 90deg केवल वर्ग box में बराबर हैं। एक गैर-वर्ग box में, to top right नीचे-बाएँ कोने से विकर्ण के लिए बिल्कुल लंबवत एक gradient line उत्पन्न करता है (जिसका मतलब है कि gradient कोने से साफ-सुथरा टकराता है) जबकि 45deg हमेशा शाब्दिक रूप से 45 डिग्री होता है, चाहे aspect ratio कुछ भी हो। यह टाइल किए गए patterns (जहाँ टाइलें आमतौर पर वर्गाकार होती हैं) के लिए कम मायने रखता है लेकिन hero backgrounds के लिए बहुत मायने रखता है।

radial-gradient: आकृतियाँ, आकार और polka dots

Grammar radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...) है। दो shape values circle और ellipse हैं (default ellipse)। आकार चार extent keywords में से एक हो सकता है (closest-side, closest-corner, farthest-side या farthest-corner (default)) या स्पष्ट lengths/percentages। Polka-dot patterns के लिए canonical recipe radial-gradient(circle at center, #000 0 5px, transparent 5px) background-size: 20px 20px के साथ है, हर 20-px टाइल के केंद्र में 5-px काला वृत्त, बाकी पारदर्शी। dots को आधी टाइल पर एक दूसरी layer के साथ ऑफसेट किया जा सकता है ताकि एक hexagonal dot grid उत्पन्न हो। शुद्ध धारियों के लिए आपको टाइल को मैन्युअली आकार देने की आवश्यकता नहीं है: repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) 10 px चौड़ी काली-और-सफेद विकर्ण धारियाँ उत्पन्न करता है, पूरे box में दोहराते हुए, बिना background-size declaration की आवश्यकता के। Repeating gradients के radial और conic counterparts भी हैं, repeating-radial-gradient संकेंद्रित वलय बनाता है, repeating-conic-gradient pinwheel बनाता है।

conic-gradient: pie charts और sunbursts जो आप पहले नहीं बना सकते थे

conic-gradient() एक रेखा के साथ या एक केंद्र से बाहर के बजाय एक केंद्र के चारों ओर color stops को घुमाता है। Color stops कोणों में स्थापित होते हैं, lengths में नहीं। बौद्धिक इतिहास अधिक रोचक CSS कहानियों में से एक है: Lea Verou ने 2011 में ही एक conical-gradient() proposal का मसौदा तैयार किया, जब किसी भी browser ने इसका समर्थन नहीं किया था, और जब Tab Atkins Jr. ने औपचारिक रूप से CSS Image Values Level 4 में function जोड़ा तो उन्होंने उनके draft को श्रेय दिया। Implementation वर्षों तक पिछड़ी रही। जून 2015 में, Verou ने एक polyfill लिखा (SVG और उनकी -prefix-free library का उपयोग करते हुए) और इसे CSSConf में मंच पर जारी किया, post का शीर्षक «Conical gradients, today!» रखा। Native shipping Chrome 69 (4 सितंबर 2018), Safari 12.1 (25 मार्च 2019) और Firefox 83 (17 नवंबर 2020) में आई। conic gradients क्या unlock करते हैं जो linear और radial नहीं कर सकते: canvas, SVG या JS के बिना pie charts और donut charts (conic-gradient(red 0 25%, blue 25% 60%, green 60% 100%) साथ ही border-radius: 50% एक पूर्ण pie chart है); color wheels (conic-gradient(red, yellow, lime, aqua, blue, magenta, red) standard hue wheel उत्पन्न करता है); छोटे कोण अंतरालों पर hard-stop रंगों को बारी-बारी करके sunburst और starburst patterns; gradient frames और कोणीय कोने highlights; और एक declaration में checkerboards (repeating-conic-gradient(#000 0 25%, #fff 0 50%) साथ ही background-size दो ढेर लगे linear gradients के बजाय एक gradient layer के साथ checkerboard उत्पन्न करता है)।

Performance: कब CSS patterns images को मात देते हैं, और कब नहीं

शुद्ध-CSS patterns के लिए performance तर्क वह है जिसे सही ढंग से समझना सबसे अधिक उचित है क्योंकि marketing copy में इसे अति-सरलीकृत किया जाता है। शुद्ध CSS की जीतें: कोई HTTP request नहीं, कोई decode नहीं, कोई PNG/JPEG/WebP overhead नहीं (एक 4-line CSS नियम एक binary file की जगह लेता है; vector-resolution-स्वतंत्र) एक pattern 1×, 2×, 3× device pixel ratio पर समान दिखता है, बिना @2x और @3x assets भेजने की आवश्यकता के, जो retina displays के लिए design systems के gradient patterns को PNGs पर प्राथमिकता देने का सबसे बड़ा एकल कारण है; तुच्छ रूप से recolourable, एक CSS variable बदलने पर पूरा pattern अद्यतन होता है; background-position या, @property के साथ, animatable color stops के माध्यम से animatable। जानने योग्य लागतें: paint लागत स्पर्श किए गए pixels और gradient complexity के साथ scale करती है, gradients बड़े box-shadows, complex SVGs और भारी text effects के साथ अधिक महंगे paint operations में से हैं, और एक full-viewport hero पर कई gradient layers स्टैक करना low-end GPUs पर frames खर्च कर सकता है। gradient colors को animate करना हर frame पर पूर्ण repaints ट्रिगर करता है (यह Chromium और Firefox में @property-registered custom properties के साथ बदल रहा है, लेकिन इसके बजाय background-position को animate करना अभी भी सुरक्षित है)। व्यावहारिक heuristic: यदि आपके पास एक एकल full-viewport pattern है और आप इसे animate नहीं कर रहे हैं, तो आप ध्यान नहीं देंगे। यदि आप एक लंबी सूची में हर कार्ड पर पाँच gradient layers स्टैक कर रहे हैं, तो profile करें।

Accessibility: contrast, decoration और reduced motion

CSS background patterns, परिभाषा के अनुसार, decorative हैं। वे document tree या accessibility tree में नहीं दिखाई देते; assistive-technology दृष्टिकोण से वे केवल मौजूद नहीं हैं। यह काफी हद तक एक feature है, Decorative Images पर W3C WAI tutorial स्पष्ट रूप से कहता है कि decorative imagery को «<img> के बजाय CSS background images का उपयोग करके प्रदान किया जाना चाहिए» ताकि यह screen readers द्वारा स्वाभाविक रूप से अनदेखा किया जा सके। लेकिन contrast अभी भी किसी भी चीज़ पर लागू होता है जो आप pattern के ऊपर रखते हैं। WCAG 2.1 Success Criterion 1.4.3 सामान्य पाठ के लिए 4.5:1 contrast ratio और बड़े पाठ के लिए 3:1 की आवश्यकता है। Patterns इसे कठिन बनाते हैं क्योंकि background की स्थानीय luminance पिक्सेल दर पिक्सेल बदलती है। WCAG Technique G18 इसे सीधे संबोधित करती है: यदि background patterned है, तो अक्षरों के चारों ओर का background इस तरह चुना या छायांकित किया जा सकता है कि अक्षर अपने पीछे के background के साथ 4.5:1 contrast ratio बनाए रखें, भले ही उनके पास पूरे background के साथ वह contrast ratio न हो। व्यवहार में: यदि आप एक pattern के ऊपर पाठ रखते हैं, या तो एक-दूसरे के समान luminance वाले pattern colors चुनें, या पाठ और pattern के बीच एक solid-color card रखें। WCAG 2.1 गैर-पाठ UI components और graphics के लिए भी 3:1 contrast की आवश्यकता है, जो pattern-based icons और dividers पर लागू हो सकता है। यदि आपका pattern animated है (एक scrolling stripe, एक धीरे-धीरे घूमता हुआ conic, एक shimmer skeleton) animation को @media (prefers-reduced-motion: no-preference) में लपेटें। प्रेरणा चिकित्सीय है, शैलीगत नहीं: animations vestibular लक्षण (मतली, चक्कर), photosensitive epilepsy वाले उपयोगकर्ताओं में दौरे, और migraines ट्रिगर कर सकते हैं।

SVG patterns vs CSS gradients: एक निष्पक्ष तुलना

SVG <pattern> element CSS gradients का आध्यात्मिक भाई है। दोनों आपको एक भरण क्षेत्र पर एक unit cell टाइल करने देते हैं। उनके अलग-अलग sweet spots हैं। SVG patterns तब जीतते हैं जब unit एक जटिल आकार है (एक पत्ता, एक मछली-शल्क, एक अनियमित षट्भुज) जिसे gradients स्वाभाविक रूप से नहीं व्यक्त कर सकते; जब आप एक designer-authored asset भेजना चाहते हैं (Hero Patterns by Steve Schoger, 27 सितंबर 2016 को CC BY 4.0 के तहत लॉन्च किया गया, canonical SVG pattern library है); जब आपको तीखे वक्रों के लिए सटीक vector geometry की आवश्यकता हो जिसे gradient hard-stops केवल अनुमानित कर सकते हैं; या जब आप fill="url(#myPattern)" के माध्यम से कई SVG elements में pattern को पुन: उपयोग करना चाहते हैं। CSS gradients तब जीतते हैं जब pattern ज्यामितीय है, धारियाँ, बिंदु, ग्रिड, चेकरबोर्ड, शेवरॉन, त्रिकोण, कुछ भी जो सीधी रेखाओं और वृत्तों से रचना योग्य हो; जब आप शून्य HTTP overhead चाहते हैं; जब आपको CSS variables के माध्यम से प्रति-instance अनुकूलन की आवश्यकता हो (--stripe-color: red pattern को तुरंत update करता है); जब आप किसी भी HTML element के लिए CSS background के रूप में pattern लागू करना चाहते हैं, केवल SVG के अंदर नहीं; या जब आप <animate> elements के बिना pattern को animate करना चाहते हैं। एक सामान्य hybrid तकनीक है background-image के अंदर एक SVG को data:image/svg+xml,... URL के रूप में inline करना, यह designers को मनमानी आकार व्यक्त करने देते हुए शुद्ध CSS के no-extra-HTTP-request वाले लाभ प्राप्त करता है। नकारात्मक पक्ष encoding की झंझट है: # %23 बन जाता है, double quotes को escape करना चाहिए, और DevTools में SVG का निरीक्षण करना अजीब है। यह generator शुद्ध-CSS gradient patterns उत्सर्जित करता है; ट्रेड-ऑफ जानबूझकर है, अधिकतम आकार लचीलेपन पर सरलता और छोटी payload।

जहाँ CSS patterns अपनी कीमत वसूलते हैं

Genre wallpaper से व्यापक है। वास्तविक production उपयोगों में शामिल हैं:

• Hero section backgrounds. page title के पीछे सूक्ष्म बड़े पैमाने के patterns (विकर्ण रेखाएँ, बड़े बिंदु, एक soft conic-gradient sunburst) image weight जोड़े बिना hero को visual texture देते हैं।
• Empty-state placeholders. जब किसी सूची में कोई items नहीं होते, तो खाली क्षेत्र में एक checkerboard या grid pattern «यह जानबूझकर खाली है» को flat white space से बेहतर ढंग से संप्रेषित करता है।
• Loading skeletons. क्लासिक «shimmer» skeleton एक linear-gradient है जिसमें semi-transparent सफेद एक ग्रे background पर चलता है, background-position के माध्यम से animated। तकनीक अब एक UX standard है।
• Card और badge backgrounds. एक «Pro» badge के पीछे एक हल्की dot-grid या एक feature card के पीछे एक विकर्ण pinstripe पाठ के साथ प्रतिस्पर्धा किए बिना texture जोड़ता है।
• त्रुटि और चेतावनी अवस्थाएँ। दोहराई गई विकर्ण धारियाँ (road-cone pattern) सहज रूप से «चेतावनी क्षेत्र» का संकेत देती हैं। repeating-linear-gradient(45deg, #fbbf24 0 10px, #1f2937 10px 20px) सार्वभौमिक «ध्यान» overlay है।
• Retro और synthwave सौंदर्य. 80 के दशक का Tron grid (एक horizon की ओर लुढ़कता हुआ perspective-warped magenta grid) एक repeating-linear-gradient साथ ही transform: perspective(...) rotateX(...) से बना एक शुद्ध-CSS effect है।
• Section dividers. sections के बीच pattern का एक छोटा, full-width band semantic weight जोड़े बिना एक लंबे पृष्ठ को तोड़ता है।
• Print-friendly perforations. printable tickets और coupons के लिए dotted/dashed perforation lines SVG की तुलना में repeating-linear-gradient के साथ लिखना आसान है।
• Light/dark mode patterns. Patterns light और dark mode के बीच अच्छी तरह से बदलते हैं क्योंकि वे CSS variables द्वारा संचालित होते हैं; एक declaration दोनों palettes के अनुकूल होती है।

कैसे उपयोग करें

1. पैटर्न प्रकार चुनें: धारियाँ, बिंदु, चेकर, ग्रिड, ज़िगज़ैग, त्रिभुज और अधिक, सभी शुद्ध CSS में।
2. रंग और स्केल अनुकूलित करें: अग्रभूमि और पृष्ठभूमि रंग, पैटर्न आकार, कोण और अंतराल स्लाइडर के साथ समायोजित करें।
3. लाइव पूर्वावलोकन करें: सेटिंग्स बदलते समय पैटर्न वास्तविक समय में प्रदर्शित होता है।
4. CSS कॉपी करें: जनरेट की गई background प्रॉपर्टी कॉपी करें और अपनी स्टाइलशीट में पेस्ट करें।

अक्सर पूछे जाने वाले प्रश्न

क्या CSS पुराने browsers में काम करेगा?

हर प्रमुख आधुनिक browser linear-gradient, radial-gradient और repeating variants को unprefixed और default पर भेजता है, सफाई 2013 के अंत में पूरी हुई। conic-gradient को अधिक समय लगा (सितंबर 2018 में Chrome 69, मार्च 2019 में Safari 12.1, नवंबर 2020 में Firefox 83) लेकिन 2026 में सार्वभौमिक भी है। Generator vendor prefixes उत्सर्जित नहीं करता क्योंकि किसी भी समर्थन योग्य browser के लिए कोई आवश्यक नहीं हैं। Microsoft Edge ने जनवरी 2020 में अपना EdgeHTML engine छोड़ दिया और IE11 ने 15 जून 2022 को end-of-life पर पहुँच गया; दोनों अब किसी भी नए उपकरण के लिए ऐतिहासिक footnotes हैं।

क्या CSS patterns टाइल किए गए image backgrounds से तेज़ हैं?

स्थैतिक patterns के लिए, हाँ, एक CSS pattern एक HTTP request, एक decode pass, और retina displays के लिए आवश्यक multi-resolution asset shipping को समाप्त करता है। Pattern किसी भी zoom पर vector-perfect भी है और CSS variables के माध्यम से तुच्छ रूप से recolourable है। Trade-off paint लागत है: gradients उन सबसे महंगी चीज़ों में से हैं जिन्हें एक browser paint कर सकता है, और एक full-viewport hero पर कई gradient layers स्टैक करना निचले-end GPUs पर frames खर्च कर सकता है। एक card या section पर एक एकल स्थैतिक pattern के लिए, आप ध्यान नहीं देंगे। यदि आप एक लंबी सूची में हर item पर पाँच gradient layers स्टैक करते हुए पाते हैं, तो shipping से पहले profile करें।

मैं एक pattern के ऊपर पाठ को सुलभ रूप से कैसे रखूँ?

WCAG 2.1 SC 1.4.3 background के विरुद्ध सामान्य पाठ के लिए 4.5:1 contrast और बड़े पाठ के लिए 3:1 की आवश्यकता है। एक patterned background के साथ स्थानीय luminance पिक्सेल दर पिक्सेल बदलती है, जो worst-case contrast को विफल कर सकती है भले ही औसत contrast ठीक दिखे। दो सुरक्षित रणनीतियाँ: एक-दूसरे के समान luminance वाले pattern colors चुनें (ताकि आपके पाठ के विरुद्ध contrast पूरी टाइल पर consistent हो), या पाठ और pattern के बीच एक solid-coloured card रखें। एक high-contrast pattern पर सीधे पाठ रखना (उदा. काली-और-सफेद धारियाँ) वह मामला है जहाँ contrast checkers और मानव readers दोनों संघर्ष करते हैं।

क्या मैं pattern को animate कर सकता हूँ?

हाँ। सबसे सस्ती animation background-position को @keyframes के साथ shift करना है, यह अधिकांश browsers पर एक compositor-only update ट्रिगर करता है और 60 fps पर सुचारू रूप से चल सकता है। gradient colors को स्वयं animate करना अधिक महँगा है क्योंकि प्रत्येक frame एक पूर्ण paint ट्रिगर करता है; modern Chromium और Firefox @property-registered custom properties के साथ इसे कम कर सकते हैं, लेकिन background-position सुरक्षित default है। हमेशा animation को @media (prefers-reduced-motion: no-preference) में लपेटें, animated backgrounds संवेदनशील उपयोगकर्ताओं के लिए vestibular लक्षण, दौरे और migraines ट्रिगर कर सकते हैं।

मेरा pattern retina displays पर धुंधला क्यों दिखता है?

नहीं होना चाहिए, bitmap images के बजाय gradients का उपयोग करने का यही पूरा बिंदु है। यदि आपका है, तो जाँचें कि color stops तीखे प्रतिशत पर हैं (एक hard stop एक ही स्थिति पर दो stops हैं; 50% 50.1% का भी एक छोटा सा अंतर एक दृश्यमान blur band प्रस्तुत करता है) और टाइल का आकार px में है, em या % में नहीं, जो पाठ scaling के साथ अप्रत्याशित रूप से बातचीत कर सकते हैं। पुराने Safari संस्करणों पर conic gradients केंद्र को थोड़ा धुंधले क्षेत्र के रूप में render करते थे; modern Safari और Chrome दोनों GPU पर rasterize करते हैं और मुद्दा काफी हद तक चला गया है।

क्या मेरा डेटा कहीं भेजा जाता है?

नहीं। Pattern selection, color picking, sizing और CSS generation सभी आपके browser में चलते हैं। जब आप नियंत्रणों का उपयोग करते हैं तो कोई outbound requests नहीं हैं, आप DevTools के Network tab में सत्यापित कर सकते हैं। उत्पन्न CSS कहीं भी paste करने के लिए आपका है।

संबंधित टूल