CSS Glitch Text Effect

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glitch Effect</title>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            height: 100vh;
            width: 100%;
            background: radial-gradient(#480d35, #17151d);
            display: grid;
            place-items: center;
            overflow: hidden;
        }
        
        h1 {
            position: relative;
            font-family: "Poppins", sans-serif;
            color: #f6d8d5;
            font-size: 150px;
            font-weight: 700;
            letter-spacing: 2px;
            transition: all 0.3s ease;
        }
        
        h1:hover {
            color: rgba(0, 194, 203, 0.2);
        }
        
        h1::before,
        h1::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.8;
        }
        
        h1::before {
            animation: glitch-1 0.8s infinite;
            clip-path: polygon(0 0, 100% 0, 100% 35%, 0 65%);
            transform: translate(-0.025em, -0.0125em);
            color: #ec2225;
            z-index: -1;
        }
        
        h1::after {
            animation: glitch-2 0.8s infinite;
            clip-path: polygon(0 65%, 100% 35%, 100% 100%, 0 100%);
            transform: translate(0.0125em, 0.025em);
            color: #313f97;
            z-index: -2;
        }
        
        h1:hover::before {
            animation: glitch-1 0.65s infinite;
        }
        
        h1:hover::after {
            animation: glitch-2 0.65s infinite;
        }
        
        @keyframes glitch-1 {
            0%, 14%, 15%, 49%, 50%, 99%, 100% {
                opacity: 1;
                transform: translate(-0.025em, -0.0125em);
            }
            1%, 12% {
                opacity: 0.8;
                transform: translate(-0.035em, -0.0225em);
            }
            2%, 11% {
                opacity: 0.9;
                transform: translate(0.025em, 0.0125em);
            }
        }
        
        @keyframes glitch-2 {
            0%, 20%, 21%, 62%, 63%, 99%, 100% {
                opacity: 1;
                transform: translate(0.0125em, 0.025em);
            }
            1%, 19% {
                opacity: 0.8;
                transform: translate(0.0225em, 0.035em);
            }
            2%, 18% {
                opacity: 0.9;
                transform: translate(-0.0125em, -0.025em);
            }
        }
        
   
        @keyframes flicker {
            0%, 18%, 22%, 25%, 53%, 57%, 100% {
                text-shadow: 0.05em 0 0 #ec2225, -0.025em -0.05em 0 #313f97, 0.025em 0.05em 0 #50c878;
            }
            20%, 24%, 55% {
                text-shadow: none;
            }
        }
        
        h1:hover {
            animation: flicker 1.5s infinite;
        }
    </style>
</head>
<body>
    <h1 data-text="Mambetovv!">Mambetovv!</h1>
</body>
</html>

CSS Glitch Text Effect

Recommended

Slice Text Effect

CSS Loading Animation with Fragment Effects

Responsive CSS Card

HTML

CSS

JS

Recommended

Slice Text Effect

CSS Loading Animation with Fragment Effects

Responsive CSS Card

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS