CSS Glitch Text Generator

Today

Build a restrained chromatic, signal or fragmented text distortion with reduced-motion support

UTILITY LAB

Glitch text

Text

Effect

Motion

Font size56px

Letter spacing3px

Intensity5px

Slice22%

Skew3°

Cycle1.8s

Background

Text

Layer A

Layer B

CSS

.glitch-stage {
    display: grid;
    place-items: center;
    min-height: 240px;
    overflow: hidden;
    background: #0b0b0f;
}

.glitch-text {
    position: relative;
    margin: 0;
    color: #f4f4f5;
    font: 800 56px/1 sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    animation: glitch-main 1.8s steps(1, end) infinite;
}

.glitch-text::before, .glitch-text::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: transform, opacity, clip-path;
    mix-blend-mode: screen;
}

.glitch-text::before {
    color: #00e5ff;
    clip-path: inset(0 0 78% 0);
    animation: glitch-a 1.8s steps(1, end) infinite;
}

.glitch-text::after {
    color: #ff2e93;
    clip-path: inset(78% 0 0 0);
    animation: glitch-b 1.566s steps(1, end) infinite reverse;
}

@keyframes glitch-main {
    0%, 74%, 92%, 100% {
        transform: translate(0);
        filter: none;
    }
    77% {
        transform: translateX(1px);
        filter: contrast(1.35);
    }
    82% {
        transform: translateX(-1px);
        filter: contrast(.9);
    }
}

@keyframes glitch-a {
    0%, 74%, 100% {
        transform: translate(0) skew(0);
        opacity: 0;
    }
    76% {
        transform: translate(5px, -2px) skew(3deg) scaleX(1.02);
        opacity: .95;
    }
    80% {
        transform: translate(-5px, 2px) skew(-3deg);
        opacity: .42;
    }
    84% {
        transform: translate(2.5px, 0) scaleY(.9);
        opacity: 1;
    }
    88% {
        transform: translate(-2.5px, -1px);
        opacity: .3;
    }
    91% {
        transform: translate(0);
        opacity: 0;
    }
}

@keyframes glitch-b {
    0%, 74%, 100% {
        transform: translate(0) skew(0);
        opacity: 0;
    }
    76% {
        transform: translate(-5px, -2px) skew(-3deg) scaleX(1.02);
        opacity: .95;
    }
    80% {
        transform: translate(5px, 2px) skew(3deg);
        opacity: .42;
    }
    84% {
        transform: translate(-2.5px, 0) scaleY(.9);
        opacity: 1;
    }
    88% {
        transform: translate(2.5px, -1px);
        opacity: .3;
    }
    91% {
        transform: translate(0);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .glitch-text, .glitch-text::before, .glitch-text::after {
        animation: none;
    }
}

HTML

Just click on the desired preset

CyberSelected

Mono

Acid

Broadcast

Amber

Ice

Ghost

Terminal

Redline

Vapor

Feedback

Utility Lab

Utility Lab

CSS Glitch Text Generator

UTILITY LAB