Using the glitch text generator and text art canvas

last updated: November 06, 2019

About this project

In recent years, artists such as Glitchr have helped popularize a certain style of "glitch text" that revolves around the use of combining diacritical marks. These marks are highly stackable, and stacking large numbers of them can lead to interesting/unexpected results.

The HTML5 glitch text generator can be used to rapidly generate this type of glitch text for copy-pasting to social media or elsewhere, and also functions as a canvas for creating text art.

Browser requirements/recommendations

The glitch text generator and text art canvas is built using HTML5 and JavaScript. As such, you must be using a browser that supports HTML5, and you must not have JavaScript disabled. In particular, the generator uses the HTML5 color input, and range (slider) input which are not fully supported in some older browsers.

"Extra-glitchy" browsers

Some older browsers have a bug that can result in artifacts being left onscreen when using the text art canvas. Specifically, stacked diacritics can cause text to be more wide or tall than the browser expects it to be. Then if the text moves, the browser fails to redraw these parts of the text, resulting in "trails" or glitch artifacts.

Most contemporary browsers have fixed this bug. The only browser on my machine that still has this bug is Internet Explorer 10. (Note that you must use the slider-free version with Internet Explorer.) Webkit browsers (Chrome and Safari) used to have this bug in older versions, but haven't for years.

If you do have an older browser like Internet Explorer, you will get particularly glitchy results when using glitch text with the motion animations as well as animations with lots of shadows.

Mobile and tablet devices

iOS: Works well in Safari, particularly if you're using the touch-friendly glitch text generator, which has larger controls that are easier to use with a touch interface than the small controls in the baseline version.

Android: Works in Chrome and will therefore work in most current Android phones, especially when using the touch-friendly glitch text generator. Older Android phones had a built-in browser called "Browser"—it doesn't work in this browser.

Chrome OS: Works great in Chrome and thus should work on any Chrome tablets.

Other: Might or might not work on Windows phones or other OSes. If you have one, try it out and let me know if/how it works.

The controls

The glitch text canvas can display up to four lines of glitched text, with user-selectable type formatting including shadow and rotation. Each line has a size control and eight collapsible formatting panels:

In addition to controls for choosing the number and background color, there are also four buttons that affect the whole screen:

Tips for using the text art canvas

The text art canvas can display a wide range of text, thanks to the Unicode character set, which contains hundreds of thousands of characters. But most fonts only support a small range of those characters. If you don't have any fonts that support a given character, you won't be able to see it. So your experience will be greatly enhanced by installing fonts that have large numbers of characters. I highly recommend these Unicode fonts, particularly Symbola. Other good fonts to have are Segoe UI Symbol, Arial MS Unicode, and Google Noto.

When you add diacritics to existing text, you end up with text that is taller than the "box" it's in. Diacritics outside this box may not appear onscreen right away. You can force them to appear using one of the Redraw buttons, but this also clears the screen of artifacts that you might want to keep. In this case, try resizing the text.

The "box" holding each line of text runs to the edge of the screen, no matter how short your text is. So if you rotate any text, part of this box could end up "in front of" some of the controls, making them unclickable. The rotate panel has Recenter and Reset buttons, but these too can be blocked. If this happens, try resizing the text or expanding/collapsing panels to move things around until you can click them.

Leaving spaces in your source text allows the text to wrap to multiple lines. This can give interesting results, particularly if the font size is large.

Using old browsers such as Internet Explorer adds extra glitchy behaviors that you may find desirable, due to the aforementioned optimization bug.

The most diacritic-friendly fonts are Helvetica/Arial, Times, and Tahoma. Courier displays diacritics but doesn't stack them vertically, instead placing them in a grid that you might or might not find useful.

Empty squares/rectangles represent undisplayable characters. Choosing a different font may help, but Unicode is massive, and you likely don't have fonts installed for all every Unicode character, unless you installed those extra fonts.

There are different blocks of diacritical marks, and some characters are picky about which ones they take: Arabic diacritics work on Latin characters, but Latin diacritics don't work on Arabic letters. The buttons that generate random diacritics attempt to pick the "right" type to generate, but you can deliberately try to apply the "wrong" ones using the precise panel. It might work, or you might just get a bunch of empty squares.

Diacritics do not stack well in all types of text. When they don't stack correctly, they may appear as dotted circles, so repeatedly trying to add diacritics can result in large numbers of these circles.

Saving your work

The glitch text generator and text art canvas does not have a "save" function, but:

Terms of [mis]use

You may use glitch text and text art that you create using the HTML5 glitch text generator in any way. It's your art; I just made the tool. If you choose to publish your art, it would be great if you could include a link to Also, I'd love it if you submitted your screenshots, animated gifs, etc to the glitch text tumblr at

You may use the glitch text scripts in your own projects. If you do, it's better for me if you upload the file to your own server than if you link to my server. You may alter the scripts if your project requires it, but don't try to pass it all off as your own work, because that would be a total jerk move. Also, don't try to make money off these scripts without cutting me in on the deal, because that's not cool, either.

If you use the scripts in a project, it would be great if you could include a link to If you do something interesting with these scripts or expand them in some cool way, I'd love if you let me know by emailing me at or submitting a link to the glitch text tumblr at


Send your questions, comments, and suggestions to Tumblr users can also submit questions to the glitch text tumblr.