CSS Text Glitch Effect Generator

CSS Text Glitch Effect Generator

GLITCH EFFECT GENERATOR

Create stunning CSS glitch text effects with real-time preview and customizable parameters. Copy the generated code with one click!

Preview

GLITCH TEXT

Customization

Glitch Type

Standard

Intense

Colors

Primary

Secondary

Accent

Medium
Normal
Large
CSS Code
HTML Code
.glitch-text {
    position: relative;
    display: inline-block;
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    color: white;
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
                 -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
                 0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    animation: glitch 500ms infinite;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch-text::before {
    animation: glitch-1 650ms infinite;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    transform: translate(-0.025em, -0.0125em);
    opacity: 0.8;
    color: #ff00ff;
}

.glitch-text::after {
    animation: glitch-2 375ms infinite;
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
    transform: translate(0.0125em, 0.025em);
    opacity: 0.8;
    color: #00ffff;
}

@keyframes glitch {
    0% {
        text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
                     -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
                     0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    }
    14% {
        text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
                     -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
                     0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    }
    15% {
        text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
                     0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
                     -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    49% {
        text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
                     0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
                     -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    50% {
        text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
                     0.05em 0 0 rgba(0, 255, 0, 0.75),
                     0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    99% {
        text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
                     0.05em 0 0 rgba(0, 255, 0, 0.75),
                     0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    100% {
        text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
                     -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
                     -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
}

@keyframes glitch-1 {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}

@keyframes glitch-2 {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(2px, 2px);
    }
    40% {
        transform: translate(2px, -2px);
    }
    60% {
        transform: translate(-2px, 2px);
    }
    80% {
        transform: translate(-2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}

CSS Text Glitch Effect Generator © 2023 | Created with

Scroll to Top