CSS Shimmering Neon Text Effect

CSS Shimmering Neon Text Effect. Do you want to make your website more attractive and beautiful with text animation? In this tutorial, I am going to make CSS Shimmering Neon Text Effect. This tutorial only for you. This is simple and easy to use. If your beginner this tutorial helps you improve your web skill. Every tutorial I am trying to show you a simple way where you can learn easily. Please copy the given source code and paste into your favorite text editor and modify it according to your desire. 

HTML

<!DOCTYPE html>
<html>
<head>
<title>Shimmering neon text</title>
</head>
<body>
<div class="neon">
  <span class="text" data-text="Welcome">Welcome</span>
  <span class="gradient"></span>
  <span class="spotlight"></span>
</div>
</body>
</html>

CSS

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

.neon {
    position: relative;
    overflow: hidden;
    filter: brightness(200%);
}

.text {
    background-color: black;
    color: white;
    font-size: 180px;
    font-weight: bold;
    font-family: sans-serif;
    text-transform: uppercase;
    position: relative;
    user-select: none;
}

.text::before {
    content: attr(data-text);
    position: absolute;
    color: white;
    filter: blur(0.02em);
    mix-blend-mode: difference;
}

.gradient {
    position: absolute;
    background: linear-gradient(45deg, red, gold, lightgreen, gold, red);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    mix-blend-mode: multiply;
}

.spotlight {
    position: absolute;
    top: -100%;
    left: -100%;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(
            circle,
            white,
            transparent 25%
        ) center / 25% 25%,
        radial-gradient(
            circle,
            white,
            black 25%
        ) center / 12.5% 12.5%;
    animation: light 5s linear infinite;
    mix-blend-mode: color-dodge;
}

@keyframes light {
    to {
        transform: translate(50%, 50%);
    }
}

Leave a Comment