#glitch text

🎤 day 766 🎵

➥ today’s akito is from the accelerate 3DMV

“You don’t recognize me? I am your Rœmänce Päærtner, Baron!”

Glitch-text cross stitch/blackwork pattern. Includes suggestions for aida count as well as how to work with pre-edged aida bookmark strips. Stitch with glow-in-the-dark DMC E940 for extra spooky.

I've been using these cute effects on my own themes and pages recently, so I decided to share the codes with everyone! 🌸

They are super easy to add and make your blog look extra special. You can see how they look in the preview above! These are "plug and play"—just copy the code block and paste it into your theme's description or a custom page or anywhere you would like this to appear.

1 ) The Gradient Text A simple way to make your text pop with a pink & blue gradient.

<style> .whereinmnl-gradient-text { font-family: sans-serif; font-weight: 800; font-size: 30px; text-transform: uppercase; /* The Magic Gradient Logic */ background: linear-gradient(45deg, #00b4d8, #ffc8dd); -webkit-background-clip: text; /* Clips the background to the text shape */ -webkit-text-fill-color: transparent; /* Makes the text see-through */ display: inline-block; } </style> <span class="whereinmnl-gradient-text">Welcome Home</span>

2 ) The Glitch Effect Header A cool animated glitch effect. Remember to change the data-text="EO" part to match your text so the layers align!

<style> .whereinmnl-glitch { position: relative; font-size: 40px; /* Adjust size */ font-weight: bold; text-transform: uppercase; font-family: 'Courier New', monospace; color: #5f6c7b; letter-spacing: 3px; } /* The Blue Layer */ .whereinmnl-glitch::before { content: attr(data-text); position: absolute; left: -2px; text-shadow: 1px 0 #00b4d8; top: 0; color: #5f6c7b; background: #fff; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: glitch-anim-1 2s infinite linear alternate-reverse; } /* The Pink Layer */ .whereinmnl-glitch::after { content: attr(data-text); position: absolute; left: 2px; text-shadow: -1px 0 #ffc8dd; top: 0; color: #5f6c7b; background: #fff; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: glitch-anim-2 3s infinite linear alternate-reverse; } /* The Keyframes (Don't worry about understanding these, they just make it shake!) */ @keyframes glitch-anim-1 { 0% { clip: rect(20px, 9999px, 10px, 0); } 20% { clip: rect(60px, 9999px, 80px, 0); } 40% { clip: rect(30px, 9999px, 10px, 0); } 60% { clip: rect(80px, 9999px, 50px, 0); } 80% { clip: rect(10px, 9999px, 40px, 0); } 100% { clip: rect(50px, 9999px, 20px, 0); } } @keyframes glitch-anim-2 { 0% { clip: rect(80px, 9999px, 20px, 0); } 20% { clip: rect(10px, 9999px, 50px, 0); } 40% { clip: rect(50px, 9999px, 20px, 0); } 60% { clip: rect(20px, 9999px, 80px, 0); } 80% { clip: rect(70px, 9999px, 30px, 0); } 100% { clip: rect(10px, 9999px, 90px, 0); } } </style> <h1 class="whereinmnl-glitch" data-text="2NE1 IS BACK">2NE1 IS BACK</h1>

3 ) The Clickable FAQ (Accordion) Click to expand! Great for "About Me" or "Commission" pages. No Javascript needed.

<style> .whereinmnl-details { background: #fff; border: 1px solid #e3f2fd; border-radius: 10px; margin-bottom: 10px; overflow: hidden; font-family: sans-serif; } /* The Clickable Header */ .whereinmnl-details summary { background: #e3f2fd; /* Light Blue */ padding: 10px 15px; cursor: pointer; font-weight: bold; color: #5f6c7b; list-style: none; /* Hides default arrow */ position: relative; transition: 0.3s; } /* Hide default marker in Safari */ .whereinmnl-details summary::-webkit-details-marker { display: none; } /* Custom Plus Icon */ .whereinmnl-details summary::after { content: '+'; position: absolute; right: 15px; font-weight: bold; color: #00b4d8; } /* When Open */ .whereinmnl-details[open] summary { background: #ffc8dd; /* Turns Pink */ color: #fff; } .whereinmnl-details[open] summary::after { content: '-'; color: #fff; } /* The Content Inside */ .whereinmnl-details p { padding: 15px; margin: 0; font-size: 12px; line-height: 1.5; color: #555; } </style> <details class="whereinmnl-details"> <summary>Can I use this as a base code?</summary> <p>No, please do not use my themes as a base. You can edit them for personal use only!</p> </details> <details class="whereinmnl-details"> <summary>Do you take commissions?</summary> <p>Yes! My ask box is open for custom requests.</p> </details>

"Oh? You want to know?"

007n7 opens up his GUI

"̵̲̹̆͝Ǒ̴̺̾h̶̯̆̄,̸̨͎͒ ̶̣͎̌ỳ̵͈o̷̺̥̅̓ư̶̗̝̿ ̶̠͐w̶̨̰͑a̸̹͑n̶͖͉̍͑t̸̛̥͔͗ ̶̧̢͘t̵̫̗̽o̷̬̎̊ ̵͕́k̸̺͓͝n̵̮̎o̸̹̰̔̓w̷̡̍̾ ̵͙͝ẅ̷́͜h̵̙̝͆ȁ̸̤̈́͜t̴̞̃ ̵̮̈͂h̴̡̅͝ȧ̵̧̳̀p̴͈̎p̶̲̄̈́ę̸̀n̸̟̹̚ș̷͝ͅ?̸̰̣͒͠ ̴̨͈̒̓D̵̘̲̿͐ó̴̦̋ ̸̡̗́y̴͎͘o̶̱̻͒̌ú̵̦͚ ̵̼̪͗͂n̵̦̍͑o̴̺͑̔w̴̨̪̉?̶͓̌̃ ̷͎̎Ḯ̵̮̪̀ ̸͍̮̆w̸̨̟̆ï̴̫l̴̳͆̚ͅl̷̘̤̃͑ ̷̦̲̌̅r̷̪̂͝i̷̿̾ͅp̸̹̐ ̸͙͈̃ÿ̷̟͚͋o̵̡̳̿̑ǘ̷̱̬̆ ̵̪͋f̸̲̩̒ṛ̸͎̕o̷͕͇̕m̸̺̝̿͊ ̷͉͐̕L̴̩̈́I̵͇̟͋̾M̵͓̥͊B̷̦̫͌͝ ̵̩̤̌̉T̵̠̂O̶̫̒̿ ̵̜͑L̶̫̹͘İ̶̟͊M̷̭̑Ḅ̸̈́̍.̸͇̑̅ͅ ̶̻̠͒Ī̵ͅ ̴͓̃ẅ̵͙̮́ḯ̸͚͎l̶͇͎̿l̴̥͗̄͜ ̸͇̫̃͛m̴͚͆́ā̵̝̦͘k̴̥͋è̶͉́͜ ̸͓͕͑y̸̤̽ỏ̷͕̑ṷ̴̒r̶̮͚̀͠ ̵͉̇͆l̵̼̭̿͘i̴̲̼͑f̴̣̍̐e̸̞͐͒ ̴̯̪͌h̵͎̓͐e̴̙̋͜l̶̛̟̾l̴͍̋̏ ̴̘̈́t̴͈͐o̶̲̙̔͝ ̵̩̬̌ṭ̴͎͑̚ḩ̵̜͊̔ẻ̸̞͛ ̶͙͉̉p̷̮̬̌o̸̦͌i̶͇̘̅̓n̵͖̞̄͒t̷̡̍̑ ̷̻̔͘D̶̨̀̋͜Ḙ̵͙̀A̶͖̬͋̒Ṭ̵͜͠͝H̶̳̋͘ ̷̻̊w̷̬̯̅ó̵̥̚u̴̙̥͠l̸̮͋̀ḑ̶̪̃͝ ̴̞̼̀ḅ̴̮̔e̴̘̘̽ ̴͉̆̄R̷͎̠͐Ĕ̷̯͜Ļ̶̫̑̏Ỉ̸̻Ĕ̵̪͜F̶͎̤̂,̴̫̔͝ ̵̺̀͘ḁ̷̀̽n̷͎̓͋d̵̛͍̞̈́ ̵̯͓͑Í̸̮ ̶̗͙̿ẅ̶̢̫́̒ô̸͕n̷͙͂'̸̺́̀t̶͚͔͗ ̷̢̈́g̶̟̅͝i̷͍̾͠v̸̝͐̕e̴̺̬͋ ̶̖͓͑͑y̶̭̎̚o̴̼̓͑u̷̳̜͛ ̶̪͑t̴͇͖͋̿ḩ̶̜̀͝a̴̝̾t̶̲͆̅ ̸̡̅͒ȑ̸͚͆e̸̛̖͔͊l̸͈̄̎i̸̫̘͊ȩ̸͉͝f̴̪̾͂.̸̨̈́ ̵̭̀́I̵̯̦͑̚'̷̻̙̀l̷͍̒͜͝l̷͕̭̈̚ ̶̢̂ͅk̶̦̖̆e̷͕͑͋e̸͙͑̅p̶̦͕̂ ̶̼̑̕y̷͙̲͂̿o̸̯̺͘ụ̷͐̍ ̶̰͗͗á̴̖͚l̶͍͍͒i̷̫̯͐̃v̵̰̖͘e̶̪̿ ̴̯̾ȃ̷̳̑n̷͖͓̾͛d̷̪͑ ̶̻̟̾M̵̭̚Ă̶̲̪K̶̪͕̏E̸̮̤̍ ̵̧̧͝Ý̵̡͕͂Ỏ̸̟͕̽U̴̙͌͝R̴̫͈͆ ̵̛̠̎F̸͔̓E̷̘͙͋Ḛ̸̛͎L̵̨̼̂ ̷̹̝̾̕T̴͖̚Ḣ̶̘̎Ė̵̙ ̶͍̜͌S̶̩̐A̸̰͊ͅM̷͍̂Ē̸̱̚ ̵̰̹̓͋P̶̢͝Ǎ̷̰̃I̶̞̬͆N̶̮̱̎͝ ̸̯̈́͝Y̵͍͆Ŏ̷̗̩̍U̵̩̤̽ ̵͈̈́͝Ṗ̴͈͂U̴̻̳̔̎T̵̮̈́̐ ̴͍̌M̷̮̾́Y̵̖̌͠ ̵͎̌͘S̶͇͓̉O̷̲͒́N̵̫͒ ̶̦̝̄T̶̞̤͗͝H̷̡̀̊R̷̮̫̈́O̴̼̻̽U̷̡͊̚G̵̹͖̚Ḧ̶͇́.̷̝͆̏ ̶̜̙͊Ö̷̠̠́V̸̹̥̍Ë̵̹̺́́R̵̺͆̚ ̷̼͈́̒Ä̷̜́N̴͉̪̐D̷͉͒ͅ ̴̢̩̀̃O̵̱͐̚V̸̧̳͗͌E̶̥͛Ṙ̸͇̺̏ ̶͓̑Ä̸̺̝́̄N̶̰̞͂D̵͎̫̀̌ ̵̥̺̄Ò̴͙Ṿ̵̀Ȅ̸̘͊R̷̗̯̍ ̴̹͋̒A̶̭̻̓̀Ḡ̷̙A̶̦͝I̴͓͈̽N̴͕̥̿.̷͂͗ͅ ̴̥̦̐Ŭ̷̮͑N̵̥͝T̵̡̛͚͝I̴̫̘͆Ĺ̶͓̓ ̸͈̱̓Y̸̩̮̊͑Ỏ̸̘̹Ŭ̷̡̨ ̸̛̞̥̀Ǵ̶̙̙͆I̸̥̋͂V̸̱̓Ḙ̵̂̓ ̶̖͙͠U̶̪͝P̵̫̙̉ ̴̫̕A̷͙͌N̴̨̾D̷̠̈́ ̸̼͆̊S̵̬̘̈́̌Ṭ̵̀Ǫ̵̆P̶̣̗͒͝ ̶͎̥̊͘F̵̘̄̄Ï̸̠̃G̴͔̔H̷̺̳͌T̴̥̩̈Ị̵̍̒N̷͕͌G̷̨̐.̷͉̝́̈ ̴͈͑I̷̛͔̣'̶̦͈̀L̷͖̩͝͠L̷̡̙͋ ̵̛͓̞̏m̶̢̿̕͜a̸̗̭͗̆k̸̼͑ḛ̵͗ ̷̨͊̃y̵̡͉͋o̶̫̬͐̅ų̵͗̎ ̴̧͓͊̾s̵̻̥̑u̶̧̪̓̌f̸͈͂͜f̵̡̅ͅé̴̮̭̍ṟ̶̀͝ ̸̨̲̇̅u̸͈͆n̴̢̪͘ṫ̵͎̠i̸̖̚l̸͕̥̋ ̵̳̉ẙ̴̺͈ó̶̬͍̒ȕ̵̢̅ ̴͎̣͗͝g̸͎͐i̸̮̐̎v̷͓̏͘ẹ̴̯̉ ̷͇̃u̶̮̔͛p̷͈̉͌ ̵̛̗͈̚a̸̹̓n̵̼̱͝d̷̻̎ ̵͓͑̄s̵̘̆̊t̶̫͊̃o̵̱̞̍͂p̶͈̋̌ ̷̜̎s̴̹̠̈́c̷͚̊̾r̸͕̋e̸̝̠̐ă̵̱̕m̴̺͆̇i̸̮͝n̵̹͓̐̎ĝ̴̲̗ ̵̡̼͐a̸͖̋̆ǹ̵͇͒d̸̙̂ ̵͔̊b̵͓̐̀e̴̛̺͂g̶̳̎̎ǵ̶̰͉̿i̸͓̜̐n̵̡̦͌g̸̨̑.̷͉̐ ̶̡̃A̶̯͌n̵̘̒͠d̵̺͍̄̃ ̵̘̂́t̸̪̲̽h̶̹̎ë̸̘́͋n̶̹͗ ̷͈͋Î̴̬́'̵͎̣͐l̸̯͈̀͝l̴̼̈͑ ̶͖̒m̶̱̮̈a̸̢͚͐k̵͓̕͝e̶̟͕͠ ̵̯͔́y̶̬̓̚ō̶̳u̵͈͓͌ ̸́͆͜f̵̝̬͋͠è̴͍ͅe̵͔͎̽l̷̛̝͈͋ ̴̧̩̓a̷̯̒͑ ̵͎͍̋ň̴̠ẻ̴͝ͅw̴̛͙̜͗ ̸̫̇p̷̱̠̄â̵͇̠í̵̞͉͠n̴̦̘̄̀.̸̩͕͛̋ ̴̼͚̂O̴̯͊n̷̰͑e̷̩̓̾ ̵̖͊t̸̟̎h̶͍͑ͅa̵̖̝̾t̶̄ͅ ̸̘͐͝h̴̰͎͆̓u̷̲̅͝r̵̟͌ṱ̶̢͗s̴͈̗͘ ̴͕͆w̵̮̻͑o̸̮̎r̴͇̍s̴̺͙͆̕ĕ̷͕̘͛,̶͓͓̃̊ ̶̻̆̈́a̷̒͘͜n̷̞͆d̴͇̱̊ ̴͖̀̑I̷̛̠͔̐ ̵͇̒c̷̭̟̈́̔ả̴̢̪n̷͇͒ ̸̝̙̈́͗ḱ̷̪͍e̴̯͓͘ę̴̹͒ṕ̸͕ ̷͔̃ô̷͜n̵̡͂͌ ̸͓̮̒g̷̼̉̋o̷̡̾ỉ̴̛̱ͅṉ̵͙̄͝g̸̳̳̔ ̵̛͉ű̷̦n̴͇͑̾ṭ̵̇̀ì̷̝͒ĺ̷̫̃ ̵̞͎̌̈́ỷ̷̧̧̓o̶̪͗ͅu̴̜̐̚ ̷͚̖̌͛d̴̢̰̋͝į̵̰̇̔ẽ̷͕ ̸̩̽͜ǫ̸͖͐f̸̛̯̠͌ ̸̯̥̈́o̴̫̅l̸̙̦̑d̶͔̔ ̸̰̿a̷̠͗̎g̸͙̅ḙ̵̊̍ ̵͖̦̈́̈́i̶̪͇̐̌ń̸̠ ̵̥̄͐ÿ̸͎́͠ő̷͖u̶̖̚ŕ̴̝ ̵̑̌͜m̶̝͛͝i̶̱̓s̷̹̞̅̃ẹ̷̛̍r̶̩̘̎ă̸͉͐b̷̩̓ĺ̴̗̚e̶͈̐̄͜ ̸̹͚́ĺ̵̪͓ĭ̵͓̱̕f̴̝̓͌ę̵͚̈́,̸̨͖́̕ ̶͍͚̆̕Í̵̥̈́ ̸̫͉̒c̸͠ͅr̸̡̻͂a̶̦͆f̵̪̓̿t̴̖̊ḛ̵̀̎d̸͈̞̃ ̶͊͐͜f̴̥́̕o̸̰͛̈́r̸͐͜͠ ̸̻̍̌y̵̼̦͌̀ǒ̸̥̼u̵̙̓̆.̸̡̈́ ̸̪͝S̵̬̺̊̓õ̸̲͍̓ ̷̡̎g̸̱͘o̷͈̿ͅ ̴͖͊ả̶̮̯͘h̶̯̫̊̿e̷̦̞͂̈́ả̷̧̭̚d̵̫͋̕,̸̖͐́ ̸̬̆̈́t̶̛̲̑r̵͓͕͠y̷̼͌̀ ̵͓̂̾t̸̲͈̿ȏ̶̥ ̵̞̝͒͘h̶̡͚̆͘u̴̮͌̾͜r̵̢̚t̷̙͝ ̷͉̭͆h̷͚͑̊i̶͕̒m̶̯̔.̴̨̡͆͒ ̷̥̣̂I̸̪͐ ̶̼̫͆d̵̖̤͑̾ȃ̷̡̂r̸͈͗̅e̸͇̐̒ ̷̨̌͋ͅÿ̵̨͕́̐o̴̬̿u̵̞͑.̴͓͂