CSS Text Glitch Effect Generator

Glitch with Color

Glitch Effect

Text

Font Size: 80px

glitch

Background Color

Text Color

Glitch Color #1

Glitch Color #2

HTML & CSS Code
<div class="glitch-wrapper">
   <div class="glitch" data-glitch="glitch">glitch</div>
</div>

<style>
.glitch-wrapper {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   background-color: #222;
}

.glitch {
   position: relative;
   font-size: 80px;
   font-weight: 700;
   line-height: 1.2;
   color: #fff;
   letter-spacing: 5px;
   z-index: 1;
}

.glitch:before,
.glitch:after {
   display: block;
   content: attr(data-glitch);
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0.8;
}

.glitch:before {
   animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
   color: #0ff;
   z-index: -1;
}

.glitch:after {
   animation: glitch-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
   color: #f0f;
   z-index: -2;
}

@keyframes glitch-color {
   0% {
      transform: translate(0);
   }

   20% {
      transform: translate(-3px, 3px);
   }

   40% {
      transform: translate(-3px, -3px);
   }

   60% {
      transform: translate(3px, 3px);
   }

   80% {
      transform: translate(3px, -3px);
   }

   to {
      transform: translate(0);
   }
}
</style>

Similar CSS Tools

See All

CSS Background Pattern Generator

Generate beautiful CSS-only background patterns and use it in your projects right away

Open

CSS Gradient Generator

Generate beautiful CSS gradients either by using presets or customizing on your own

Open

CSS Cubic Bezier Generator

Generate CSS cubic Bezier easing functions by previewing animation and time-progress graph

Open

What is Online CSS Text Glitch Effect Generator?

CSS Text Glitch Effect Generator is a free online tool for generating pure CSS text glitch effect. Glitched text is a great way to add some visual interest to your website. They can be used to highlight important text or to add some attractiveness to a boring paragraph of text. CSS glitch animations works mainly by distorting the text by manipulating the color, position, or shape of the text.

CSS text glitch effects can be used in hero sections of the websites or blogs to grab the attention of the visitors. Font size of the texts must be more than ~60px to get a good glitch effect. Otherwise, it may be hard to distinguish the glitched text from the original text.

By using this tool, you can get different types of glitch effects such as color, noise, or transformation glitch. You can also customize the effect by changing the background color, text color, glitch color, font size, etc. In general, the effect looks better in dark backgrounds with white text color, but there is no limitation, so you can set all the properties according to your needs. There is no need to use JavaScript or any other library to make the effect work. It is generated using pure CSS animations. Here, you can see how the effect looks like.

CSS Text Glitch Effect

Mostly, glitch effects are created by cloning the text multiple times and animate the clones by using transform or clip-path properties in such a way that the original one looks distorted. As the text is animated, it draws the attention of the visitors of the page. If there is a specific word or phrase you want to emphasize, you can use these CSS styles to highlight it.

If you are working on a creative project or working as a creative front-end developer, these types of CSS effects are handy and easy to implement to make your project stand out. As there is no need to use any JavaScript code or library, it takes only a few minutes to implement it in your own project.

How to use Online CSS Text Glitch Effect Generator?

You can generate CSS code for text glitch effect by following these steps:

Choose the type of glitch effect from the dropdown list.
Enter the text for which you want to generate effect.
Change the font size of the text if needed.
Each effect has its own set of options. You can change the background color, text color, glitch color, etc. as per your requirement. The output of the glitch effect will be updated in real time in the preview section.
Once you are done with the settings, you can copy the HTML & CSS code and use it on your own website or blog by pasting the HTML and CSS code.