CSS Glitch Text

How to Create a Glitch Text Effect with HTML and CSS

Watch the full tutorial here:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Glitch text effect</title>
</head>

<body>
    <span class="glitch glitch-idle" data-text="HELLO WORLD">HELLO WORLD</span>
</body>

</html>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #FFF;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #111;
    font-family: monospace;
}

.glitch {
    font-size: 60px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;

    &::before,
    &::after {
        content: attr(data-text);
        width: 100%;
        position: absolute;
        color: #F0F;
        left: 0;
        top: 0;
        overflow: hidden;
        z-index: -1;
    }

    &::after {
        color: #0FF;
    }
}

.glitch-idle::before {
    animation: glitch-smooth 2s infinite;
}

.glitch-idle::after {
    animation: glitch-smooth 2s infinite reverse;
}

.glitch:hover::before {
    animation: glitch-strong 0.2s infinite;
}

.glitch:hover::after {
    animation: glitch-strong 0.2s infinite reverse;
}

@keyframes glitch-smooth {
    0% {
        clip-path: inset(0 0 95% 0);
        transform: translate(1px, -1px);
    }

    50% {
        clip-path: inset(20% 0 50% 0);
        transform: translate(-1px, 1px);
    }

    100% {
        clip-path: inset(60% 0 0 0);
        transform: translate(1px, 0);
    }
}

@keyframes glitch-strong {
    0% {
        clip-path: inset(80% 0 0 0);
        transform: translate(-2px, -2px);
    }

    33% {
        clip-path: inset(10% 0 80% 0);
        transform: translate(2px, 2px);
    }

    66% {
        clip-path: inset(40% 0 20% 0);
        transform: translate(-3px, 1px);
    }

    100% {
        clip-path: inset(0 0 95% 0);
        transform: translate(3px, -2px);
    }
}