{"id":55145,"date":"2022-11-03T12:30:00","date_gmt":"2022-11-03T16:30:00","guid":{"rendered":"https:\/\/www.litmus.com\/?p=55145"},"modified":"2022-11-08T11:23:49","modified_gmt":"2022-11-08T16:23:49","slug":"how-to-code-a-css-glitch-effect-in-email","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email","title":{"rendered":"How to Code a CSS Glitch Effect in Email [+ Code]"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_63615cc7b0a60\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">The <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/scope\/dn4xfafantb2\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Halloween edition of newsletter<\/span><\/a><span style=\"font-weight: 400;\"> took a seasonally spooky turn. Our email team created a fabulously freaky email using glitching <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/animation-in-email-3-mistakes-you-shouldnt-fall-for\/\"><span style=\"font-weight: 400;\">animations<\/span><\/a><span style=\"font-weight: 400;\">, all created using CSS.<\/span><\/p>\n<p><script src=\"https:\/\/fast.wistia.com\/embed\/medias\/ojgi7zn2sr.jsonp\"><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\"><\/script><\/p>\n<div class=\"wistia_responsive_padding\" style=\"padding: 0% 0 0 0;\">\n<div class=\"wistia_responsive_wrapper\" style=\"height: 100%; width: 100%;\">\n<div class=\"wistia_embed wistia_async_ojgi7zn2sr seo=false videoFoam=true\" style=\"height: 100%; width: 100%;\"><\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Read to find out how I <\/span><span style=\"font-weight: 400;\">created this CSS glitch effect<\/span>.<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_636a7f393771e\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2021\/07\/Contact-icon-blue@2x.png\" alt=\"Image of email icon\" width=\"124\" height=\"84\"\/>\n\t\t\t\t\t  \t\t  <\/div><!--blog-post-cta-button-icon-->\n\t\t\t\t\t\t\t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Subscribe for more email tricks and treats<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>Keep your know-how fresh on email marketing, design, and development with our newsletters\u2014including \u201csurprise and delight\u201d moments like our October newsletter.<\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/subscribe\/\">\n\t\t\t\t\t\tSign me up!\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>\n\n\n\n\t<div id=\"simple-text-block-block_636a7f853771f\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Tutorial: CSS glitch effect in email<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The glitching is all CSS animation using keyframes, so it&#8217;s very much something that works only in the browser window or in Apple or iOS mail. Great for progressive enhancements, not so good if your subscribers open mostly on <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Outlook<\/span><\/a><span style=\"font-weight: 400;\"> or Gmail.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The animation is the same for the image and for the text. In both instances, I created duplicate versions of the image\/text using :before and :after pseudo classes and then animated those versions. Let&#8217;s start with the image.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> I added the image as a <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">background<\/span><\/a><span style=\"font-weight: 400;\"> in a div so I could play around with it. Then I added the image again in a &lt;img&gt; tag so that it would show up anywhere that the animation wasn&#8217;t supported. I also added a size and shape to the div. The CSS:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.glitch-image {\n \tmax-width: 560px;\n \tmin-height: 250px;\n \twidth: 100%;\n \theight: auto;\n}\n.image {\n \tbackground: url('https:\/\/campaigns.litmus.com\/_email\/2022\/October\/2022-10-Newlsetter\/202210_mod2.png') no-repeat center center;\n \tbackground-size: 100% 100%;\n}<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_636289d3d402f\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400\">And the html for the image:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;div class=\"glitch-image image\">\n \t&lt;img src=\"https:\/\/campaigns.litmus.com\/_email\/2022\/October\/2022-10-Newlsetter\/202210_mod2.png\" width=\"560\" height=\"250\" alt=\"A spooky hotel being watched over by the Litmus Live logo in the moon.\" style=\"width: 100%; max-width: 560px; height: auto;\" \/>&lt;\/a>\n&lt;\/div><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_63615cfdb0a61\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400\">I added another wrapper div around that glitch image. I added an overflow:hidden to the wrapper so any glitch that went outside the div didn&#8217;t show up. I wanted a TV screen type of glitch for the images, where it all happens in a designated space.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.glitch-wrapper {\n \tmax-width: 560px;\n \tmin-height: 250px;\n \twidth: 100%;\n \theight: auto;\n \tposition: relative;\n \toverflow: hidden;\n}\n<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_63629a9817d83\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400\">And the html for the image:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;div class=\"glitch-wrapper\">\n \t&lt;div class=\"glitch-image image\">\n      \t&lt;img src=\"https:\/\/campaigns.litmus.com\/_email\/2022\/October\/2022-10-Newlsetter\/202210_mod2.png\" width=\"560\" height=\"250\" alt=\"A spooky hotel being watched over by the Litmus Live logo in the moon.\" style=\"width: 100%; max-width: 560px; height: auto;\" \/>&lt;\/a>\n \t&lt;\/div>\n&lt;\/div>\n<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_63629ace17d84\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">For the text I added a data-text attribute on a span around the text in the HTML:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;h2>&lt;span class=\"glitch-text\" data-text=\"How to Create Clickable Phone Numbers with HTML in Emails\">How to Create Clickable Phone Numbers with HTML in Emails&lt;\/span>&lt;\/h2><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_63629af217d85\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400\">I had to add some aria around it to make it more <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-to-make-the-worlds-worst-or-best-email-accessible\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">accessible<\/span><\/a><span style=\"font-weight: 400\">, otherwise I&#8217;d end up with screen readers reading out the :before and :after content as well. So the final version had an aria-label on the h2 to tell the screen readers what to read and an aria-hidden on the span to hide the actual copy:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">&lt;h2 aria-label=\"How to Create Clickable Phone Numbers with HTML in Emails\">&lt;span class=\"glitch-text\" data-text=\"How to Create Clickable Phone Numbers with HTML in Emails\" aria-hidden=\"true\">&lt;a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/html-clickable-phone-number-in-email\/?utm_content=headline\">How to Create Clickable Phone Numbers with HTML in Emails&lt;\/a>&lt;\/span>&lt;\/h2><\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_63629b2d17d86\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400;\">I used the screen reader with <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\" target=\"_blank\" rel=\"noopener\">Litmus Email Testing<\/a> to see what it would sound like\u2014and it worked perfectly.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ok, so now that we&#8217;ve got the base set up, we start building the pseudo classes. For the image, we&#8217;re going to have those have nothing in the content, but they&#8217;ll inherit the background image:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.glitch-image:after, .glitch-image:before {\n \tcontent: \"\";\n \tbackground: inherit;\n}\n<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_63629b5317d87\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400\">For the text, I had the data-text attribute display as the content, and made sure it was the same color as the text:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.glitch-text:before, .glitch-text:after {\n \tcolor: #262524;\n \tcontent: attr(data-text);\n}\n<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_63629b8117d88\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400\">At this point we have three versions of the image and three versions of the text. We need to stack them on top of each other so that we can eventually hide, show, and move around the &#8220;before&#8221; and &#8220;after content&#8221; to create the CSS glitch effect. So we&#8217;ll use absolute positioning to put the pseudo class content on top of the original.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.glitch-image:after, .glitch-image:before {\n \tcontent: \"\";\n \tbackground: inherit;\n \tposition: absolute;\n  \ttop: 0;\n  \tleft: 0;\n  \tright: 0;\n  \tbottom: 0;\n}\n<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_63629bc017d89\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400\">For the text, I added the absolute positioning. I also had to add some positioning to the text to make sure everything stacked correctly, and some alignment and widths to the pseudo class content to make sure it lined up with the actual text. This was <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/css-resets\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">the CSS<\/span><\/a><span style=\"font-weight: 400\"> that let me get that all aligned:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.glitch-text:before, .glitch-text:after {\n \tcolor: #262524;\n \tcontent: attr(data-text);\n \tposition: absolute;\n \ttop: 0;\n \tleft: 0;\n}\n.glitch-text {\n  \tposition: relative;\n  \tdisplay: grid;\n \tgrid-template-columns: 1fr;\n}\n<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_63629c6d17d8b\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400\">Fun fact: When the text was shorter and didn&#8217;t span the whole width, I found I had to add text-align:center and width:100% to make sure it actually ended up on top of the content. Since I only had one headline that was like that, I made a special class just for that headline.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.text-glitch-a:before, .text-glitch-a:after { text-align: center; width: 100%; }<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_63629cf317d8c\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400\">If you find that your pseudo class content isn&#8217;t getting positioned correctly, you can try adding that in. <\/span><span style=\"font-weight: 400\">So that gives us the two elements we&#8217;ll be animating. Now to add the animations.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Essentially what we&#8217;re going to do is create a rectangle clip-path of the additional content that moves up and down, and gets hidden\/shown at different points during the animation. Since the rectangles are directly on top of the content, I moved the content to the left a bit during the animation. <\/span><span style=\"font-weight: 400\">I used two variations of the same animation (one for the before content and one for the after content), so the content would be doing two different things when the glitch happened.<\/span><\/p>\n<p><span style=\"font-weight: 400\">How did I land on these specific points? I wanted the rectangle to move pretty fast to create a flicker, so I knew I wanted the animation points to be close together. But I also didn&#8217;t want to overwhelm anyone so I wanted there to be a good space between glitches. So, the animation only goes to 25%, and stays static after that. The rectangles are at several different intervals. The animation CSS ended up looking like this:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">@keyframes glitch-anim {\n  \t0%, 25.1% { clip-path: polygon(0 0, 0 0, 0 0, 0 0); left: 2px; }\n  \t5% { clip-path: polygon(0 80%, 100% 80%, 100% 70%, 0 70%); left: 4px; }\n  \t9% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); left: 7px; }\n  \t10% { clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%); left: 6px; }\n  \t15% { clip-path: polygon(0 40%, 100% 40%, 100% 30%; 0 30%); left: 5px; }\n  \t19% { clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%); left: 7px; }\n  \t20% { clip-path: polygon(0 60%, 100% 60%, 100% 50%, 0 50%); left: 4px; }\n  \t25% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); left: 5px; }\n}\n@keyframes glitch-anim-2 {\n  \t0%, 25.1% { clip-path: polygon(0 0, 0 0, 0 0, 0 0); left: -2px; }\n  \t3% { clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%); left: -7px; }\n  \t7% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); left: -3px; }\n  \t8% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); left: -7px; }\n  \t12% { clip-path: polygon(0 40%, 100% 40%, 100% 50%; 0 50%); left: -4px; }\n  \t16% { clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%); left: -6px; }\n  \t17% { clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%); left: -5px; }\n  \t25% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); left: -7px; }\n}\n<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_63629dac17d8d\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400\">Now we apply the animation to the content to bring it all together. First, we assign the animations to the different content:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.glitch-text:before, .glitch-image:before {\n \tanimation-name: glitch-anim;\n}\n.glitch-text:after, .glitch-image:after {\n \tanimation-name: glitch-anim-2;\n}\n<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_63629dcc17d8e\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400\">Then, we applied the animation settings. In this case, I&#8217;m okay with them being the same for the &#8220;before&#8221; and &#8220;after&#8221; content so I group it all together:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.glitch-image:after, .glitch-image:before, .glitch-text:before, .glitch-text:after {\n \tanimation-timing-function: linear;\n \tanimation-fill-mode: forwards;\n \tanimation-iteration-count: infinite;\n}\n<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_63629dea17d8f\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400\">I made the text duration longer than the image duration, as the longer duration looked better on the text. Here is the last bit of CSS for the animation:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">.glitch-text:before, .glitch-text:after {\n \tanimation-duration: 3s;\n \tanimation-delay: 0s;\n}\n.glitch-image:before, .glitch-image:after {\n \tanimation-duration: 7s;\n}\n.image:after, .image:before {\n \tanimation-delay: 0s;\n}\n<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_63629e0817d90\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400\">When I did this in the newsletter, I had the images set up with different delays so that the glitches didn&#8217;t happen all at the same time. I wanted to make sure that if someone was scrolling and missed one animation, they&#8217;d still see the glitch on one of the images.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The last little bits that I added were to optimize for mobile, <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Dark Mode<\/span><\/a><span style=\"font-weight: 400\">, and reduced motion:<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code\">@media screen and (max-width:600px) {\n \t.glitch-wrapper, .glitch-image {\n      \tmin-height: 140px;\n  \t}\n}\n@media (prefers-reduced-motion) {\n \t.glitch:before, .glitch:after, .glitch-text:before, .glitch-text:after {\n      \tanimation-name: none;\n \t}\n}\n@media (prefers-color-scheme: dark) {\n \t.glitch-text:before, .glitch-text:after {\n      \tcolor: #fdfdfd;\n \t}\n}\n[data-ogsc] .glitch-text:before, [data-ogsc] .glitch-text:after {\n \tcolor: #fdfdfd;\n}\n<\/pre>\n\n\n\n\n\t<div id=\"simple-text-block-block_63629e3117d91\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><span style=\"font-weight: 400\">I put everything in a CSS file and hosted it on our servers so that it would only load on Apple mail and iOS. (That helped with it only showing where it was supported). I ran into some of the glitches not showing up correctly in some email clients in Litmus, so I added some targeting to take it out of those specific clients. That&#8217;s something you&#8217;ll have to do on a case by case basis when you start <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">testing<\/span><\/a><span style=\"font-weight: 400\"> it in your email.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_63629e8717d93\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  <div class=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t  <img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/blog-cta-buttons-issues.svg\">\n\t\t  <\/div><!--blog-post-cta-button-icon-->\n\t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\n\t\t\t  <h2 class=\"h-sm\"><strong>Ensure your designs come across right<\/strong><\/h2>\n\t\t\t  <p>Broken emails lead to less conversions. Preview your emails across 100+ email clients, apps, and devices to ensure an on-brand, error-free subscriber experience. Every time.<\/p>\n\t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\n\t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t  <a class=\"btn btn-primary\" rel=\"noopener\" target=\"_blank\" href=\"\/email-testing\/\">Learn more<\/a>\n\t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t  \t\t  \t\t  \t\t  \t\t       <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Knowing some key email deliverability terms that influence whether your email will make it to the inbox as you intend, makes you a more empowered email marketer. Download our email deliverability cheat sheets for a handy reference to keep at your fingertips.<\/p>\n","protected":false},"author":44,"featured_media":55178,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[478,10251,499,102],"blog_category":[10300],"class_list":["post-55145","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-design","tag-email-client","tag-email-coding","tag-html","blog_category-email-building"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Code a CSS Glitch Effect in Email [+ Code] - Litmus<\/title>\n<meta name=\"description\" content=\"Learn how to create a CSS glitch effect on images in emails with code to add to your own email campaigns.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Code a CSS Glitch Effect in Email [+ Code]\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a CSS glitch effect on images in emails with code to add to your own email campaigns.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-03T16:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-08T16:23:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Code-CSS-Glitch-Header.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Code a CSS Glitch Effect in Email [+ Code] - Litmus","description":"Learn how to create a CSS glitch effect on images in emails with code to add to your own email campaigns.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email","og_locale":"en_US","og_type":"article","og_title":"How to Code a CSS Glitch Effect in Email [+ Code]","og_description":"Learn how to create a CSS glitch effect on images in emails with code to add to your own email campaigns.","og_url":"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2022-11-03T16:30:00+00:00","article_modified_time":"2022-11-08T16:23:49+00:00","og_image":[{"width":1380,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Code-CSS-Glitch-Header.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email"},"author":{"name":"Martyn Lee","@id":"https:\/\/www.litmus.com\/#\/schema\/person\/98adac5406ecb538b468ff84e96c5dd6"},"headline":"How to Code a CSS Glitch Effect in Email [+ Code]","datePublished":"2022-11-03T16:30:00+00:00","dateModified":"2022-11-08T16:23:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email"},"wordCount":10,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Code-CSS-Glitch-Header.jpg","keywords":["Design","Email Client","Email Coding","HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email","url":"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email","name":"How to Code a CSS Glitch Effect in Email [+ Code] - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Code-CSS-Glitch-Header.jpg","datePublished":"2022-11-03T16:30:00+00:00","dateModified":"2022-11-08T16:23:49+00:00","description":"Learn how to create a CSS glitch effect on images in emails with code to add to your own email campaigns.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Code-CSS-Glitch-Header.jpg","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/11\/Code-CSS-Glitch-Header.jpg","width":1380,"height":725,"caption":"How to code a CSS glitch effect"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/how-to-code-a-css-glitch-effect-in-email#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"How to Code a CSS Glitch Effect in Email [+ Code]"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":"https:\/\/www.litmus.com\/#\/schema\/person\/98adac5406ecb538b468ff84e96c5dd6","name":"Martyn Lee"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/55145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/44"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=55145"}],"version-history":[{"count":14,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/55145\/revisions"}],"predecessor-version":[{"id":55575,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/55145\/revisions\/55575"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/55178"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=55145"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=55145"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=55145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}