Creating a Glitch Clock Effect with CSS Using clip-path and Animations

During a quiet period at work the author explored a "Cool~" visual effect and decided to share a step‑by‑step guide for creating a glitch‑style clock using only CSS.

The glitch effect simulates digital image or video distortion, manifesting as sudden, irregular flashes, shakes, twists, overlaps, or deformations, and is often used to convey technical failure or futuristic aesthetics.

To reproduce the core flicker, the tutorial focuses on the CSS clip-path property, which can cut away parts of an element. The basic syntax examples are shown:

/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);

Using clip-path inside a @keyframes rule creates a simple flicker:

span {
    display: block;
    position: relative;
    font-size: 128px;
    line-height: 1;
    animation: clock 1s infinite linear alternate-reverse;
}

@keyframes clock {
    0% { clip-path: inset(0px 0px calc(100% - 10px) 0); }
    100% { clip-path: inset(calc(100% - 10px) 0px 0px 0); }
}

To make the flicker less static, the author adds a layered pseudo‑element ( ::before ) and offsets it by -2px . Then, SCSS random functions generate varying clip-path polygons for each keyframe step, producing a more chaotic flash:

@keyframes c2 {
    @for $i from 0 through 20 {
        #{percentage($i / 20)} {
            $y1: random(100);
            $y2: random(100);
            clip-path: polygon(0% $y1 * 1px, 100% $y1 * 1px, 100% $y2 * 1px, 0% $y2 * 1px);
        }
    }
    23% { transform: scaleX(0.8); }
}

Further intensity is achieved by duplicating the element with both ::before and ::after pseudo‑elements, assigning different colors (blue and red) and separate animations ( c1 and c2 ), which creates overlapping glitch layers.

span {
    display: block;
    position: relative;
    font-size: 128px;
    line-height: 1;

    &::before,
    &::after {
        display: block;
        content: attr(data-time);
        position: absolute;
        top: 0;
        color: $txt-color;
        background: $bg-color;
        overflow: hidden;
        width: 720px;
        height: 128px;
    }

    &::before { left: calc(-#{$offset-c2}); text-shadow: #{$lay-c2} 0 #{$color-c2}; animation: c2 1s infinite linear alternate-reverse; }
    &::after  { left: #{$offset-c1}; text-shadow: calc(-#{$lay-c1}) 0 #{$color-c1}; animation: c1 2s infinite linear alternate-reverse; }
}

To add the distortion component of a glitch, the tutorial introduces the CSS skewX() transform, showing how it tilts an element horizontally, and then combines it with keyframe animations that vary opacity, scale, and skew to produce a full‑blown glitch clock effect.

@keyframes is-off {
    0%, 50%, 80%, 85% { opacity: 1; }
    56%, 57%, 81%, 84% { opacity: 0; }
    58% { opacity: 1; }
    71%, 73% { transform: scaleY(1) skewX(0deg); }
    72% { transform: scaleY(3) skewX(-60deg); }
    91%, 93% { transform: scaleX(1) scaleY(1) skewX(0deg); color: $txt-color; }
    92% { transform: scaleX(1.5) scaleY(0.2) skewX(80deg); color: green; }
}

The article concludes with a poetic note and thanks to the "Glitch Clock" implementation.