मुफ़्त CSS जनरेटर

हमारे CSS जनरेटर के बारे में

Absolutool में लाइव प्रीव्यू और कॉपी-पेस्ट तैयार कोड के साथ 12 विज़ुअल CSS जनरेटर शामिल हैं। प्रत्येक जनरेटर आपको स्लाइडर, ड्रैग हैंडल या कंट्रोल के साथ मानों को समायोजित करने और तुरंत परिणाम देखने देता है · CSS ज्ञान की आवश्यकता नहीं। जब आप परिणाम से खुश हों, एक क्लिक में कोड कॉपी करें।

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

CSS विज़ुअल जनरेटर क्यों मायने रखते हैं

linear-gradient(135deg, #667eea 0%, #764ba2 100%), box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06), या clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) जैसी विशेषताओं के लिए हाथ से CSS लिखना आपसे माँग करता है कि आप वाक्य-विन्यास को पूरी तरह जानें और देखने से पहले ही दृश्य परिणाम की कल्पना करें। विज़ुअल जनरेटर उस क्रम को उलट देते हैं: एक स्लाइडर खींचें, एक रंग चुनें, पूर्वावलोकन को अद्यतन होते देखें, फिर उत्पन्न कोड कॉपी करें। इस श्रेणी के उपकरण मानक-अनुरूप CSS बनाते हैं जो पिछले पाँच वर्षों में जारी हर ब्राउज़र में काम करता है, बिना किसी मालिकाना वाक्य-विन्यास के, बिना किसी प्रीप्रोसेसर की आवश्यकता के।

इस साइट का हर जनरेटर एक एकल HTML पृष्ठ है जिसमें एक लाइव-पूर्वावलोकन फलक और नियंत्रणों का एक समूह है। जैसे-जैसे आप मान समायोजित करते हैं, पूर्वावलोकन वास्तविक समय में उसी असली CSS का उपयोग करके फिर से प्रस्तुत होता है जिसे जनरेटर कॉपी करके देगा। CSS होने का नाटक करने वाला कोई मालिकाना रेंडरिंग इंजन नहीं है; जो आप देखते हैं वही ठीक वह है जो आपके उपयोगकर्ता देखेंगे। उत्पन्न कोड आधुनिक वाक्य-विन्यास का उपयोग करता है (जहाँ उपयुक्त हो वहाँ CSS कस्टम प्रॉपर्टी, RTL समर्थन के लिए लॉजिकल प्रॉपर्टी, नए रंग उपकरणों के लिए OKLCH) पर जब आपको पुराने ब्राउज़र के समर्थन की आवश्यकता हो तो यह सुंदर ढंग से पीछे हट जाता है: आप प्रति उपकरण एक अकेली सेटिंग को घटाकर पुराने के अनुकूल किसी रूप में बदल सकते हैं।

ब्राउज़र समर्थन और वेंडर उपसर्ग

CSS विनिर्देश 2018 से उल्लेखनीय रूप से स्थिर रहे हैं: ग्रेडिएंट, ट्रांसफ़ॉर्म, छायाएँ, एनिमेशन, flexbox, grid और clip-path सभी हर प्रमुख ब्राउज़र (Chrome, Firefox, Safari, Edge) में बिना उपसर्ग के काम करते हैं। जिन मुट्ठी भर विशेषताओं को अब भी उपसर्ग चाहिए वे ज़्यादातर प्रयोगात्मक हैं (पुराने Safari में CSS subgrid, स्क्रॉल-चालित एनिमेशन)। जनरेटर डिफ़ॉल्ट रूप से उपसर्ग-रहित मानक CSS आउटपुट करते हैं जिसे आप सीधे किसी स्टाइलशीट में चिपका सकते हैं। backdrop-filter (ग्लासमॉर्फिज़्म जनरेटर में उपयोग होता है) अंतिम आम पिछड़ने वाला था, पर यह स्थिर Firefox 103 (जुलाई 2022) में आ गया और Safari वर्षों से -webkit-backdrop-filter के माध्यम से इसका समर्थन करता है। इन उपकरणों द्वारा कवर की गई विशेषताओं के लिए आधुनिक परियोजनाओं को विरले ही autoprefixer की आवश्यकता होती है।

यदि आप Internet Explorer 11 को लक्ष्य बना रहे हैं (एक लुप्त होता पर कुछ उद्यम इंट्रानेट के लिए वास्तविक दर्शक-वर्ग), तो यहाँ की अधिकांश विशेषताओं का समर्थन नहीं है। grid जनरेटर सुंदर ढंग से पीछे हटता है क्योंकि IE11 एक पुराने grid वाक्य-विन्यास का समर्थन करता है जो सरल लेआउट के लिए पर्याप्त मिलता-जुलता है, पर subgrid या gap जैसी उन्नत सुविधाएँ प्रस्तुत नहीं होंगी। आधुनिक दर्शकों के लिए, अँगूठे का नियम है “इन उपकरणों द्वारा बनाए गए मानक वाक्य-विन्यास का उपयोग करें, उपसर्ग छोड़ दें, और स्वीकार करें कि शेष बहुत छोटा IE दर्शक-वर्ग एक सरलीकृत लेआउट देखेगा”। किसी भी ऐसी विशेषता के लिए जिसके बारे में आप अनिश्चित हों, caniuse.com प्रामाणिक संदर्भ बना हुआ है।

प्रदर्शन संबंधी विचार

दृश्य प्रभाव जल्दी ही प्रदर्शन के जाल बन सकते हैं। एक बहु-परत box-shadow प्रति फ़्रेम एक बार पेंट होता है, जो सस्ता है; जबकि किसी स्थिर हेडर पर एक filter: blur(20px) हर स्क्रॉल घटना पर पुनः-पेंट करने को बाध्य करता है और मोबाइल पर फ़्रेम दर को गिरा देता है। Cubic Bezier उपकरण आपको एनिमेशन के वक्रों को ऐसे समायोजित करने में मदद करता है कि वे ठीक लगें; इसे एनिमेट किए जाने वाले तत्व पर will-change: transform के साथ जोड़ने से ब्राउज़र पृष्ठ को पुनः-पेंट करने के बजाय एनिमेशन को GPU पर संयोजित करने के लिए तैयार रहता है। सामान्य नियम: transform और opacity को एनिमेट करें; बाकी सब कुछ (चौड़ाई, ऊँचाई, top, left, रंग) लेआउट या पेंट को ट्रिगर करता है और एनिमेशन में संयम से उपयोग किया जाना चाहिए।

ग्लासमॉर्फिज़्म जनरेटर यहाँ के दृश्य प्रभावों में सबसे भारी है क्योंकि backdrop-filter: blur(20px) ब्राउज़र को बाध्य करता है कि वह हर उस फ़्रेम के लिए पृष्ठभूमि को पकड़े, उसे धुँधला करे और फिर से संयोजित करे जिसमें काँच का तत्व दिखाई देता है। अलग ग्राफ़िक्स वाले डेस्कटॉप पर यह अदृश्य है; मध्यम-श्रेणी के फ़ोन पर यह फ़्रेम दर को 60 fps से 30 fps तक गिरा सकता है। CSS पैटर्न जनरेटर SVG-आधारित पैटर्न बनाता है जिनकी लागत नगण्य है। लोडर और एनिमेशन तब तक सहज बने रहते हैं जब तक वे transform/opacity को एनिमेट करते हैं। यदि आपका डिज़ाइन तीन या अधिक धुँधलापन की परतें ढेर करता है, तो प्रकाशित करने से पहले मध्यम-श्रेणी के फ़ोन पर परीक्षण करें; “सुंदर” और “झटकेदार” के बीच का अंतर एक अतिरिक्त परत हो सकता है।

डिज़ाइन सिस्टम में CSS

आधुनिक डिज़ाइन सिस्टम रंगों, अंतरालों और उन्नयनों को कस्टम प्रॉपर्टी (CSS चर) के रूप में व्यक्त करते हैं, फिर उनके ऊपर घटक की शैलियाँ बनाते हैं। यहाँ के जनरेटर सीधे मान आउटपुट करते हैं जिन्हें आप किसी घटक में वैसे ही चिपका सकते हैं, पर वे सिस्टम टोकन काटने के लिए भी उतने ही उपयोगी हैं: बढ़ती गहराई वाली तीन या चार box-shadow को अपने --shadow-sm, --shadow-md, --shadow-lg टोकन में कॉपी करें; दो ग्रेडिएंट को --bg-primary और --bg-secondary में कॉपी करें; border-radius मानों का एक क्रम --radius-sm आदि में कॉपी करें। जनरेटर आपको ये निर्णय संख्याओं का अनुमान लगाकर और पृष्ठ ताज़ा करके लेने के बजाय दृश्य रूप से लेने में मदद करता है।

CSS Grid जनरेटर नामित रेखाओं के साथ grid-template-columns और grid-template-rows आउटपुट करता है, जो एक सिस्टम के लिए आप चाहते हैं। Flexbox जनरेटर flex लेआउट के लिए वही करता है। दोनों ऐसा कोड बनाते हैं जिसे आप वैसे ही किसी क्लास या किसी Tailwind घटक में लपेट सकते हैं। Tailwind का उपयोग करने वाली परियोजनाओं के लिए, मान अक्सर सीधे अनूदित हो जाते हैं: 1rem का अंतराल gap-4 बन जाता है, 0.5rem का बॉर्डर रेडियस rounded-md बन जाता है। Tailwind-रहित परियोजनाओं के लिए, कच्चे CSS चर आमतौर पर ठीक वही होते हैं जो आप डिज़ाइन सिस्टम फ़ाइल में चाहेंगे। दृश्य रूप से चुनने का चरण वह भाग है जिसे आप आसानी से स्वचालित नहीं कर सकते।

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