# CSS-only glitch effect

DevFeed: [CSS-only glitch effect](<https://devfeed.tech/articles/css-only-glitch-effect-37255.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/css-image-glitch/>)

Author: Stanko

Published: 2025-04-03T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [CSS animations](<https://devfeed.tech/topics/css-animations.md>), [HTML](<https://devfeed.tech/topics/html.md>), [html elements](<https://devfeed.tech/topics/html-elements.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [css](<https://devfeed.tech/tags/css.md>), [css-animations](<https://devfeed.tech/tags/css-animations.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>)

## AI overview

This tutorial explains how to create an image glitch effect using only HTML and CSS. It describes representing an image as vertically shifted strips, varying strip heights, displacing the strips, altering colors, and using closely spaced CSS keyframes to create abrupt movement. JavaScript is used only to generate the HTML and CSS, not in the final effect.

## Source excerpt

Let me show you how I created a CSS-only image glitch effect. I was working on the robot poet and wanted my robotic bard to glitch - because it felt fitting given the quality of poetry it generates. Here's the final result: The effect involves quite a bit of HTML and CSS but no JavaScript. I did use JavaScript to generate the HTML and CSS, but it is not used in the final version. To be clear, there's nothing wrong with using JavaScript for this kind of thing. I just saw it as a fun challenge to make a pure CSS version. The idea # In the words of Daft Punk: Slice It Move It Hue-Rotate It We'll have to slice the image into strips and randomly displace them while altering colors at the same time. Slice it # I wanted to use a single image without having to slice it manually. To achieve that, we need to create a bunch of divs. Each div represents one strip and has the image set as a background, but the image is shifted vertically. When stacked on top of each other, the divs look the same as the original image. To make the glitch effect more believable, we'll use a random height for each strip. We could do this by hand, but that would be tedious, so let's use code: const getStripHTML = (top: number, stripHeight: number): string => { const duration = random(5, 10); const name = `glitch-${duration}`; return ` <div class="strip" style="height: ${stripHeight}px; background-position: 0 -${top}px;" />`; }; const getGlitchHTML = (height: number): string[] => { let i = 0; const html: string[] = []; while (1) { const stripHeight = random(1, 6); if (i + stripHeight < height) { const strip = getStripHTML(i, stripHeight); html.push(strip); } else { // Last strip const strip = getStripHTML(i, height - i); html.push(strip); break; } i = i + stripHeight; } return html; }; Show codeHide code This gives us a list of divs with the image inside. When we render them all, we get the original image in a bunch of HTML elements we can manipulate individually. Toggle gap Now that we have our stri