CSS ग्लिच टेक्स्ट इफ़ेक्ट जनरेटर

CSS Text Glitch Effect Generator

टेक्स्ट, अक्षर आकार, रंग विस्थापन, कंपन और समय बदलें; CSS कम गति की पसंद का सम्मान करता है।

लोकल प्रोसेसिंग

बग रिपोर्ट करें

टाइप मोशन

CSS ग्लिच टेक्स्ट इफ़ेक्ट जनरेटर

सुरक्षित टेक्स्ट रेप्लिका को लेयर करके कंट्रोल्ड क्रोमैटिक ग्लिच एनिमेशन बनाएँ।

लाइव प्रीव्यू

CSS एक्सपोर्ट करने से पहले कंट्रोल एडजस्ट करके इफ़ेक्ट जाँचें।

मान्य CSS

TOOLARS

03 / CSS.glitch

899 B · लाइव

.glitch {
  position: relative;
  display: inline-block;
  color: #ffffff;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.glitch::before {
  color: #00f0ff;
  clip-path: inset(0 0 52% 0);
  animation: toolars-glitch-a 0.85s steps(2, end) infinite;
}

.glitch::after {
  color: #ff254d;
  clip-path: inset(48% 0 0 0);
  animation: toolars-glitch-b 0.85s steps(2, end) infinite reverse;
}

@keyframes toolars-glitch-a {
  0%, 100% { transform: translate(0); }
  35% { transform: translate(-4px, -1px); }
  70% { transform: translate(4px, 1px); }
}

@keyframes toolars-glitch-b {
  0%, 100% { transform: translate(0); }
  30% { transform: translate(4px, 1px); }
  65% { transform: translate(-4px, -1px); }
}

@media (prefers-reduced-motion: reduce) {
  .glitch::before, .glitch::after { animation: none; opacity: 0.45; }
}

टास्क पथ / इनपुट से परिणाम तक

CSS टेक्स्ट ग्लिच इफ़ेक्ट कैसे बनाएं

01
पूर्वावलोकन टेक्स्ट लिखें
पूर्वावलोकन पाठ · फ़ॉन्ट आकार · प्रभाव · RGB बदलाव / कंपन
02
तीनों रंग सेट करें
टेक्स्ट रंग बेस परत पेंट करता है, जबकि सायन चैनल और रेड चैनल वे ऑफ़सेट प्रतिकृतियां हैं जो क्रोमैटिक फ्रिंज बनाती हैं। शुद्ध सायन और लाल के करीब चैनल क्लासिक क्रोमैटिक लुक देते हैं; मंद चैनल ज़्यादा सूक्ष्म, आधुनिक विभाजन बनाते हैं।
03
ग्लिच मोशन ट्यून करें
लेयर ऑफ़सेट (1–12 px) तय करता है कि प्रतिकृतियां कितनी दूर बहती हैं, और चक्र अवधि (0.2–3 s) लूप की रफ़्तार तय करती है। पूर्वावलोकन तीनों परतों को लाइव मंचित करता है।
04
तीनों परतों को समझें
बेस एलिमेंट आपका टेक्स्ट रंग रखता है, जबकि सायन प्रतिकृति लाइन के ऊपरी हिस्से तक और लाल प्रतिकृति निचले हिस्से तक क्लिप होती है। हर प्रतिकृति steps(2, end) एनिमेशन चलाती है — चिकनी स्लाइड के बजाय कड़ी छलांगें — यही ग्लिच को सिग्नल इंटरफ़ेयरेंस जैसा महसूस कराता है।
05
ग्लिच CSS कॉपी करें
toolars-text-glitch.css सहेजने के लिए CSS कॉपी करें या .css डाउनलोड करें दबाएं। एक्सपोर्ट में prefers-reduced-motion ब्लॉक शामिल है जो मोशन-संवेदनशील विज़िटर के लिए स्थिर फ्रिंज बनाए रखता है। आउटपुट पैनल लाइव बाइट गिनती दिखाता है, और टेक्स्ट वैलिडेशन पास न करने तक दोनों ऐक्शन बंद रहते हैं।
06
data-text एट्रिब्यूट जोड़ें
प्रतिकृतियां अपना कंटेंट attr(data-text) से पढ़ती हैं, इसलिए आपके एलिमेंट को अपने दृश्यमान टेक्स्ट के समान data-text एट्रिब्यूट चाहिए। जब बाद में टेक्स्ट बदले, दोनों अपडेट करें — एट्रिब्यूट ही वह है जिसे सायन और लाल परतें असल में पेंट करती हैं। एट्रिब्यूट उसी एलिमेंट पर रहता है जिस पर क्लास है, इसलिए पूरा इफ़ेक्ट एक ही टैग रहता है। HTML में वर्तमान CSS और कार्यशील उदाहरण है। मूल नियंत्रण कीबोर्ड इनपुट का समर्थन करते हैं।

टूल के तथ्य

प्रोसेसिंग: आपके ब्राउज़र में
इनपुट इस डिवाइस से बाहर जाता है: कभी नहीं
रिटेंशन: कुछ भी स्टोर नहीं होता
कीमत: मुफ़्त

आपका इनपुट ब्राउज़र में ही रहता है।

CSS ग्लिच टेक्स्ट इफ़ेक्ट जनरेटर अपना सत्यापित लोकल एक्ज़ीक्यूशन पथ इस्तेमाल करता है और कोई छिपा इनपुट या आउटपुट इतिहास नहीं बनाता।

लोकल एक्ज़ीक्यूशन

मौजूदा ब्राउज़र टैब के अंदर चलता है।

कोई छिपी प्रोसेसिंग नहीं

सक्रिय टूल डेटा कभी Toolars दस्तावेज़ रिकॉर्ड नहीं बनता।

खाते की ज़रूरत नहीं

बिना प्रोफ़ाइल बनाए मुख्य वर्कफ़्लो इस्तेमाल करें। साइन इन करने के बाद फ़ेवरिट आपके खाते से सिंक होते हैं।

तुरंत रीसेट

टैब साफ़ करें और सक्रिय कार्य डेटा गायब।

CSS ग्लिच टेक्स्ट इफ़ेक्ट जनरेटर असल में क्या करता है

स्ट्रीम ओवरले को चरचराता शीर्षक चाहिए, 404 पेज को ठीक इतनी बेचैनी चाहिए, कॉन्फ़्रेंस स्प्लैश स्क्रीन रेट्रो-टर्मिनल ऊर्जा चाहती है। ग्लिच टाइपोग्राफ़ी को बढ़ा-चढ़ाकर करना आसान है, यही वजह है कि ऑफ़सेट और अवधि सीमित रखी गई है — और क्योंकि इफ़ेक्ट इसी टैब में रचा जाता है, स्ट्रेस-टेस्ट के दौरान अनरिलीज़्ड वर्डमार्क मशीन से बाहर नहीं जाता। बड़े साइज़ पर छोटे शब्द इफ़ेक्ट को सबसे अच्छा उठाते हैं, इसलिए प्लेसहोल्डर कॉपी के बजाय असली हेडलाइन परखें। एक्सपोर्ट किए गए @keyframes वही सटीक ऑफ़सेट और ताल रखते हैं जो आपने तय किए।

आम सवाल

इफ़ेक्ट को किस मार्कअप की ज़रूरत है?

.glitch क्लास वाला एक एलिमेंट और उसके टेक्स्ट कंटेंट के समान data-text एट्रिब्यूट। ::before और ::after प्रतिकृतियां उसी एट्रिब्यूट से पेंट होती हैं, फिर लाइन के ऊपरी और निचले आधे हिस्से तक क्लिप हो जाती हैं। टेक्स्ट, अक्षर आकार, रंग विस्थापन, कंपन और समय बदलें; CSS कम गति की पसंद का सम्मान करता है। HTML में वर्तमान CSS और कार्यशील उदाहरण है। मूल नियंत्रण कीबोर्ड इनपुट का समर्थन करते हैं।

टेक्स्ट की सीमाएं क्या हैं?

पूर्वावलोकन पाठ: 1–120. निर्यात से पहले स्रोत, विकल्प और जाँच संदेश देखें। अमान्य परिणाम निर्यात नहीं होता।

reduced-motion उपयोगकर्ताओं के लिए यह कैसा व्यवहार करता है?

एक्सपोर्ट में prefers-reduced-motion ब्लॉक शामिल है जो दोनों एनिमेशन रोक देता है और प्रतिकृतियों को 45% ओपेसिटी पर गिराता है, चलती फ्रिंज के बजाय स्थिर क्रोमैटिक फ्रिंज छोड़ता है। बेस टेक्स्ट दोनों ही स्थिति में अछूता रहता है, इसलिए संदेश दोनों मोड में समान पढ़ा जाता है।

एनिमेशन सरकने के बजाय कूदता क्यों है?

दोनों प्रतिकृति एनिमेशन steps(2, end) इस्तेमाल करते हैं, जो ट्रांसफ़ॉर्म को चिकने इंटरपोलेशन के बजाय असतत स्थितियों के बीच कूदाते हैं। वह कड़ा कदम ही सिग्नल-इंटरफ़ेयरेंस सौंदर्यशास्त्र की पहचान है; लेयर ऑफ़सेट तय करता है कि हर छलांग कितनी दूर जाए।

कौन से ऑफ़सेट और अवधि मान अच्छे काम करते हैं?

एक सेकंड के करीब चक्र के साथ 1–3 px ऑफ़सेट सूक्ष्म स्टैटिक जैसे पढ़े जाते हैं और उन हेडिंग को सूट करते हैं जिन्हें पठनीय बने रहना है। 8–12 px तक तेज़ चक्र के साथ सिर्फ़ छोटे सजावटी शब्दों के लिए जाएं; 4 px, 0.85 s डिफ़ॉल्ट बीच में सुरक्षित बैठते हैं।

क्या मेरा लिखा टेक्स्ट कहीं भेजा जाता है?

नहीं। इफ़ेक्ट मौजूदा ब्राउज़र टैब में लोकल रूप से रेंडर होता है, किसी खाते की ज़रूरत नहीं, और टेक्स्ट कभी स्टोरेज, लॉग या नेटवर्क में नहीं जाता। डिफ़ॉल्ट नमूना वापस लाने के लिए रीसेट दबाएं।

CSS ग्लिच टेक्स्ट इफ़ेक्ट जनरेटर

प्रोसेसिंग का विवरण

CSS ग्लिच टेक्स्ट इफ़ेक्ट जनरेटर

लाइव प्रीव्यू

CSS टेक्स्ट ग्लिच इफ़ेक्ट कैसे बनाएं

पूर्वावलोकन टेक्स्ट लिखें

तीनों रंग सेट करें

ग्लिच मोशन ट्यून करें

तीनों परतों को समझें

ग्लिच CSS कॉपी करें

data-text एट्रिब्यूट जोड़ें

टूल के तथ्य

आपका इनपुट ब्राउज़र में ही रहता है।

लोकल एक्ज़ीक्यूशन

कोई छिपी प्रोसेसिंग नहीं

खाते की ज़रूरत नहीं

तुरंत रीसेट

CSS ग्लिच टेक्स्ट इफ़ेक्ट जनरेटर असल में क्या करता है

संबंधित काम, कोई बंद गली नहीं।

CSS लोडिंग एनिमेशन जनरेटर

CSS चेकबॉक्स जनरेटर

CSS टॉगल स्विच जनरेटर

CSS क्लिप पाथ जनरेटर

CSS ग्लिच टेक्स्ट इफ़ेक्ट जनरेटर

लाइव प्रीव्यू