Neon Text Reflection

How to Create a Neon Text Reflection Effect with 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>neon text reflection effect css</title>
</head>

<body>
    <div class="container">
        <div class="title">CYBERVERSE</div>
        <div class="title reflection">CYBERVERSE</div>
        <div class="noise"></div>
    </div>
</body>

</html>

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

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    background: #000;
    overflow: hidden;
}

.container {
    position: relative;
    text-align: center;

    & .title {
        font-size: 60px;
        color: #f0f;
        text-transform: uppercase;
        letter-spacing: 5px;
        text-shadow:
            0 0 5px #f0f,
            0 0 10px #f0f,
            0 0 20px #f0f,
            0 0 40px #f0f;
        animation: flicker 4s infinite, float 3s ease-in-out infinite;
    }

    & .reflection {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        color: #f0f;
        opacity: 0.3;
        transform: scaleY(-1);
        filter: blur(2px);
        animation: ripple 6s infinite ease-in-out;
    }

    & .noise {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        background: url('https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif') center center / cover;
        opacity: 0.03;
        mix-blend-mode: screen;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes flicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        opacity: 1;
    }

    20%,
    22%,
    24%,
    55% {
        opacity: 0.4;
    }
}

@keyframes ripple {
    0% {
        transform: scaleY(-1) translateY(0);
    }

    50% {
        transform: scaleY(-1) translateY(4px);
    }

    100% {
        transform: scaleY(-1) translateY(0);
    }
}