डिज़ाइन और CSS

अपने ब्राउज़र में ही किसी कोड स्निपेट को सिंटैक्स-हाइलाइट की गई इमेज में बदलें — 20+ भाषाओं, कस्टम थीम व पृष्ठभूमियों, लाइन नंबरों और PNG या SVG निर्यात के साथ।

टेक्स्ट और बैकग्राउंड रंग के बीच WCAG 2.1 कंट्रास्ट और APCA Lc स्कोर जाँचें, AA, AAA और 3:1 बैज देखें और निकटतम पास होने वाला रंग लागू करें।

RGB या Lab कलर स्पेस में चुने गए अनुपात पर दो HEX रंगों को मिलाएँ और परिणामी मध्य रंग को एक स्वैच और कॉपी करने योग्य HEX मान के रूप में पढ़ें।

एक बेस HEX रंग को समायोज्य चरणों, प्रति-चरण WCAG कंट्रास्ट संकेतों और CSS, Tailwind व JSON निर्यात के साथ OKLCH, HSL या RGB स्केल में बदलें।

कोई छवि अपलोड करें और देखें कि वह प्रोटैनोपिया, ड्यूटेरानोपिया, ट्राइटैनोपिया या पूर्ण वर्णांधता में कैसी दिखती है, फिर सिम्युलेट किया गया परिणाम डाउनलोड करें.

दीर्घवृत्तीय क्षैतिज और ऊर्ध्वाधर त्रिज्याओं सहित border-radius के सभी आठ कोने मानों को समायोजित करें, बॉक्स का लाइव पूर्वावलोकन देखें और संक्षिप्त CSS कॉपी करें।

ऑफ़सेट, ब्लर, स्प्रेड, रंग और inset नियंत्रणों के साथ बहु-परत CSS box-shadow बनाएं, लाइव प्रीव्यू देखें और उपयोग के लिए तैयार प्रॉपर्टी कॉपी करें।

न्यूनतम और अधिकतम फ़ॉन्ट आकार के साथ न्यूनतम और अधिकतम व्यूपोर्ट चौड़ाई को बिना ब्रेकपॉइंट वाले एकल CSS clamp() फ़्लूइड-टाइपोग्राफ़ी एक्सप्रेशन में बदलें।

संख्या इनपुट के साथ circle, ellipse, polygon, inset या rounded-inset प्रीसेट से एक CSS clip-path बनाएं, उसका लाइव पूर्वावलोकन देखें और उपयोग के लिए तैयार प्रॉपर्टी कॉपी करें।

हैंडल खींचकर CSS cubic-bezier या steps() ईज़िंग संपादित करें, इसे लाइव एनिमेशन में देखें और मान कॉपी करें।

CSS Flexbox या Grid को दृश्य रूप से बनाएं — कंटेनर और प्रति-आइटम नियंत्रण, कस्टम ट्रैक आकार और grid-template-areas संपादक के साथ, फिर जनरेट किया CSS कॉपी करें।

ब्लर, पारदर्शिता, संतृप्ति, बॉर्डर और शैडो नियंत्रणों के साथ-साथ एक टिंट रंग के साथ फ़्रॉस्टेड-ग्लास CSS बनाएँ, इसे किसी बैकड्रॉप पर देखें, और backdrop-filter वाला CSS कॉपी करें।