CSS Neon Glow Wave Text Animation

CSS text animation is a special type of animation that brings the text content of a website to life through transitions, movements, etc. A web designer applies CSS animation techniques like bouncing, typing, sliding, etc., to the static text content of a website to attract the attention of visitors. This helps to make the website more attractive and create a strong impact. In this blog post, we will share with you a CSS Neon Glow Wave Text Animation snippet. For your convenience, we have added a video tutorial below. Please watch it before collecting the source code.

Video Tutorial:

We hope you enjoyed the above video tutorial on CSS text animation. A well-crafted CSS text animation has the power to connect with users instantly. We all know that viewers naturally respond to motion-related content than static content. An animated text grabs the user’s attention within the first few seconds of interaction. If your website has key content, headlines, or calls-to-action, CSS text animations help to emphasize them to the user. These types of animations help to make your website look modern, creative, and professional, which builds trust and encourages users to stay longer. In this snippet, we have created a glowing animated text effect with a transparent fill and a neon-like stroke using text-stroke and CSS text-shadow. Here, the letters will move slightly and

You May Also Like:

CSS Neon Glow Wave Text Animation [ Source Code ]:

To create this Neon Glow Wave Text Animation using HTML and CSS, you have to create an HTML file and a CSS file. After that, you have to copy the code from the code box below and paste it into your file. After saving the code, open it in your browser and see if it is working or not. You can also download the code from the download button below the blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>creative text animation</title>
    <link href="https://fonts.googleapis.com/css2?family=Rowdies:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>    
    
    <div class="container">
        <span class="letter">A</span>
        <span class="letter">N</span>
        <span class="letter">I</span>
        <span class="letter">M</span>
        <span class="letter">A</span>
        <span class="letter">T</span>
        <span class="letter">E</span>
    </div>
    
</body>
</html>

ADD CSS:

body {
	margin: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: radial-gradient(circle at center, #2a1b3d, #0d1b2a);
	overflow: hidden;
}
.container {
	display: flex;
	gap: 5px;
	position: relative;
}
.letter {
	position: relative;
	font-family: "Rowdies", sans-serif;
	font-size: 10rem;
	color: transparent;
	-webkit-text-stroke: 1px #b2fefa;
	text-transform: uppercase;
	animation: ani1 3.5s ease-in-out infinite;
	will-change: transform, color;
}
@keyframes ani1 {
	0%, 100% {
		transform: translateX(0) translateY(0) skewX(0deg);
	}
	50% {
		transform: translateX(10px) translateY(-3px) skewX(20deg);
	}
}
.letter:nth-child(odd) {
	animation: ani1 3.5s ease-in-out infinite, ani2 2s ease-in-out infinite;
}
.letter:nth-child(even) {
	animation: ani1 3.5s ease-in-out infinite, ani3 2s ease-in-out infinite;
}
@keyframes ani2 {
	0%, 100% {
		-webkit-text-stroke-color: #b2fefa;
		text-shadow: 0 0 10px rgba(178, 254, 250, 0.7);
	}
	50% {
		-webkit-text-stroke-color: #ffccff;
		text-shadow: 0 0 15px rgba(255, 204, 255, 0.9);
	}
}
@keyframes ani3 {
	0%, 100% {
		-webkit-text-stroke-color: #ffccff;
		text-shadow: 0 0 10px rgba(255, 204, 255, 0.7);
	}
	50% {
		-webkit-text-stroke-color: #b2fefa;
		text-shadow: 0 0 15px rgba(178, 254, 250, 0.9);
	}
}
.letter:nth-child(1) {
	animation-delay: 0s;
}
.letter:nth-child(1)::before {
	animation-delay: 0s;
}
.letter:nth-child(1)::after {
	animation-delay: 0.2s;
}
.letter:nth-child(2) {
	animation-delay: 0.3s;
}
.letter:nth-child(2)::before {
	animation-delay: 0.3s;
}
.letter:nth-child(2)::after {
	animation-delay: 0.5s;
}
.letter:nth-child(3) {
	animation-delay: 0.6s;
}
.letter:nth-child(3)::before {
	animation-delay: 0.6s;
}
.letter:nth-child(3)::after {
	animation-delay: 0.8s;
}
.letter:nth-child(4) {
	animation-delay: 0.9s;
}
.letter:nth-child(4)::before {
	animation-delay: 0.9s;
}
.letter:nth-child(4)::after {
	animation-delay: 1.1s;
}
.letter:nth-child(5) {
	animation-delay: 1.2s;
}
.letter:nth-child(5)::before {
	animation-delay: 1.2s;
}
.letter:nth-child(5)::after {
	animation-delay: 1.4s;
}
.letter:nth-child(6) {
	animation-delay: 1.5s;
}
.letter:nth-child(6)::before {
	animation-delay: 1.5s;
}
.letter:nth-child(6)::after {
	animation-delay: 1.7s;
}
.letter:nth-child(7) {
	animation-delay: 1.8s;
}
.letter:nth-child(7)::before {
	animation-delay: 1.8s;
}
.letter:nth-child(7)::after {
	animation-delay: 1.8s;
}

Many websites, such as creative agencies, design studios, e-commerce platforms, personal portfolios, educational or corporate sites, use various types of animated text to showcase innovation and originality, highlight sales, new arrivals, or limited-time offers, make headlines stand out, reduce boredom, and improve content retention. We hope you have collected this code by now. For more snippets, please click the "Load More" button on our homepage. Thanks for visiting our website. Thanks for visiting our website.

DOWNLOAD CODE

Video Tutorial:

CSS Neon Glow Wave Text Animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

CSS Neon Glow Wave Text Animation

Video Tutorial:

CSS Neon Glow Wave Text Animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form