Glitch Generator

पाठ सेटिङ

60px
5

विकल्प निर्यात गर्नुहोस्

लाइभ पूर्वावलोकन

ग्लिच प्रभाव
सिर्जना गरिएको कोड
/* CSS for your glitch effect */ .your-glitch-class { position: relative; color: #000000; font-size: 60px; font-weight: bold; } .your-glitch-class::before, .your-glitch-class::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .your-glitch-class::before { left: 2px; text-shadow: -1px 0 #00CEFF; animation: glitch-anim 2s infinite linear alternate-reverse; } .your-glitch-class::after { left: -2px; text-shadow: -1px 0 #FF2E63; animation: glitch-anim2 3s infinite linear alternate-reverse; opacity: 0.7; } @keyframes glitch-anim { 0% { clip: rect(42px, 9999px, 28px, 0); } 20% { clip: rect(62px, 9999px, 58px, 0); } 40% { clip: rect(33px, 9999px, 37px, 0); } 60% { clip: rect(59px, 9999px, 71px, 0); } 80% { clip: rect(1px, 9999px, 14px, 0); } 100% { clip: rect(42px, 9999px, 73px, 0); } } @keyframes glitch-anim2 { 0% { clip: rect(25px, 9999px, 50px, 0); } 20% { clip: rect(33px, 9999px, 44px, 0); } 40% { clip: rect(70px, 9999px, 90px, 0); } 60% { clip: rect(2px, 9999px, 14px, 0); } 80% { clip: rect(60px, 9999px, 76px, 0); } 100% { clip: rect(42px, 9999px, 50px, 0); } }

Glitch Examples

CYBERPUNK

साइबरपंक शैली

खेल शीर्षकहरू, पोस्टरहरू, र भविष्यको किनाराको आवश्यकता पर्ने कुनै पनि चीजको लागि उत्तम।

मजबूत गड़बड़ी
HACKED

ह्याकर एस्थेटिक

सुरक्षा-थीम्ड डिजाइनहरूको लागि घुसपैठ, खराब लुक सिर्जना गर्नुहोस्।

तीव्र गडबडी
रेट्रो खेल

रेट्रो गेमिङ

नोस्टाल्जिक 80 / 90 को दशकको खेल शैली एक आधुनिक ग्लिच ट्विस्टको साथ।

मध्यम गडबडी
BROKEN

डिजिटल खराबी

दूषित वा बिग्रिएको डिजिटल प्रदर्शन अनुकरण गर्नुहोस् ।

अराजक गडबडी
SUBTLE

सूक्ष्म ग्लिच

पेशेवर डिजाइनहरूको लागि अधिक परिष्कृत ग्लिच प्रभाव जुन किनाराको संकेत चाहिन्छ।

नरम गडबडी
ERROR 404

पर्दा मा त्रुटि

प्राविधिक गडबडी महसुसको साथ ध्यान खिच्ने त्रुटि पृष्ठ सिर्जना गर्नुहोस्।

प्रणाली ग्लिच

How to Use

कार्यान्वयन निर्देशिका

1
तपाईँको ग्लिच उत्पन्न गर्नुहोस्

तपाईँको ग्लिच प्रभाव अनुकूलन गर्न नियन्त्रणहरू प्रयोग गर्नुहोस् । सही रूप सिर्जना गर्न पाठ, आकार, तीव्रता, र रङहरू समायोजन गर्नुहोस्।

2
जेनेरेट गरिएको कोड प्रतिलिपि बनाउनुहोस्

तपाईंको ग्लिच प्रभावको लागि कोड समात्न "प्रतिलिपि सीएसएस" र "प्रतिलिपि एचटीएमएल" बटनक्लिक गर्नुहोस्।

3
तपाईँको परियोजनामा थप्नुहोस्

सीएसएसलाई तपाईंको स्टाइलसिटमा र एचटीएमएललाई तपाईंको टेम्प्लेटमा टाँस्नुहोस् जहाँ तपाईं प्रभाव प्रकट गर्न चाहनुहुन्छ।

4
थप अनुकूलन गर्नुहोस्

तपाईंको विशिष्ट डिजाइन आवश्यकताहरूको लागि प्रभावलाई ठीक-ट्यून गर्न सीएसएसमा एनिमेशन समय, रङ, वा स्थितिहरू परिमार्जन गर्नुहोस्।

अक्सर सोधिने प्रश्नहरू

के यो सबै ब्राउजरहरूसँग संगत छ?

The glitch effect uses modern CSS features (CSS animations and text-shadow) which are supported in all modern browsers. Internet Explorer does not fully support these features.

के म यसलाई व्यावसायिक रूपमा प्रयोग गर्न सक्छु?

हो, उत्पन्न कोड व्यक्तिगत र व्यावसायिक प्रयोग दुवैको लागि नि: शुल्क छ। कुनै एट्रिब्यूसन आवश्यक छैन ।

म कसरी ग्लिच तीव्रता समायोजन गर्न सक्छु?

तीव्रता स्लाइडरले एनिमेशन गति र पाठ छायाँको दूरी नियन्त्रण गर्दछ। उच्च मानहरूले अधिक स्पष्ट ग्लिच प्रभाव सिर्जना गर्दछ।

के म यसलाई आफ्नै फन्टहरूसँग प्रयोग गर्न सक्छु?

बिल्कुल! जेनेरेटरले कोर ग्लिच प्रभाव कोड प्रदान गर्दछ। तपाईँले यसलाई सीएसएस फन्ट गुणहरू परिमार्जन गरेर आफ्नो मनपर्ने फन्ट प्रयोग गरेर कुनै पनि पाठमा लागू गर्न सक्नुहुन्छ।

मेरो साइटमा ग्लिच प्रभाव किन काम गर्दैन?

सुनिश्चित गर्नुहोस् कि तपाईंको सीएसएस र एचटीएमएल सही तरिकाले कार्यान्वयन गरिएको छ। तत्वसँग एउटा हुनुपर्दछdata-textदृश्यमान पाठसँग मेल खाने विशेषता । कुनै पनि सीएसएस संघर्षहरूको लागि पनि जाँच गर्नुहोस् जुन ग्लिच शैलीहरू ओभरराइड हुन सक्छ।

About This Tool

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

मुख्य विशेषताहरू

पूर्ण अनुकूलन योग्य

तपाईंको डिजाइन दृष्टि मिलान गर्न ग्लिच प्रभावको प्रत्येक पक्ष समायोजन गर्नुहोस्।

कोड निर्गत सफा गर्नुहोस्

राम्रोसँग ढाँचाबद्ध, उत्पादन-तयार सीएसएस र एचटीएमएल प्राप्त गर्नुहोस् जुन तपाईं सजिलै एकीकृत गर्न सक्नुहुनेछ।

लाइभ पूर्वावलोकन

समायोजन गर्दा तपाईंको ग्लिच प्रभाव कस्तो देखिन्छ भनेर ठ्याक्कै हेर्नुहोस्।

उत्तरदायी डिजाइन

उत्पन्न ग्लिच प्रभावहरू सबै स्क्रिन साइजहरूमा सुन्दर रूपमा काम गर्दछ।

एसभीजी निर्यात

अन्य डिजाइन उपकरणहरूमा प्रयोगको लागि एसभीजीको रूपमा तपाईंको ग्लिच पाठ डाउनलोड गर्नुहोस्।

रङ नियन्त्रण

तपाईँको आधार पाठ र ग्लिच ओभरलेका लागि अनुकूल रङ रोज्नुहोस् ।

यससँग सिर्जना गरियोर आधुनिक वेब टेक्नोलोजीहरू। कुनै जाभास्क्रिप्ट लाइब्रेरीहरू आवश्यक छैन - केवल शुद्ध सीएसएस जादू।

Related Tools