Latest Posts

Creating a neon text effect

Posted on by Zubair Shaik

Loading

Creating a Neon Text Effect Using CSS and jQuery

Introduction

Neon text effects have been a popular trend in modern web design, as they bring a glowing, futuristic, and visually appealing touch to website elements. With CSS and jQuery, we can create stunning neon effects that simulate real neon lights.

In this guide, we will cover:

  1. Understanding Neon Text Effects
  2. Basic Neon Effect Using Pure CSS
  3. Enhancing the Neon Effect with CSS Animations
  4. Adding a Flickering Effect Using jQuery
  5. Creating Interactive Neon Effects (Hover and Click)
  6. Optimizing Performance for Smooth Animations
  7. Ensuring Cross-Browser Compatibility

By the end of this guide, you will be able to create a glowing neon text effect with dynamic interactions using jQuery and CSS.

1. Understanding Neon Text Effects

A neon effect is achieved by applying a combination of:

  • Bright Text Colors: Typically, neon colors like blue, pink, red, or green are used.
  • Text Shadows: Multiple layers of text-shadow in CSS create a glowing effect.
  • Glow Intensity: The blur-radius of the shadow helps in spreading the light effect.
  • Animation: Flickering and pulsing effects make the neon sign look more realistic.

2. Basic Neon Effect Using Pure CSS

Let’s start with a simple neon text effect using CSS.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neon Text Effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="neon-text">Neon Glow</h1>
</body>
</html>

CSS Styling (styles.css)

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');

body {
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: white;
    font-family: 'Orbitron', sans-serif;
}

.neon-text {
    font-size: 60px;
    color: #0ff;
    text-shadow: 
        0 0 5px #0ff,
        0 0 10px #0ff,
        0 0 20px #0ff,
        0 0 40px #00ffff,
        0 0 80px #00ffff;
}

Explanation

  • Font: We use 'Orbitron' to give a futuristic look.
  • Text Color: A bright cyan (#0ff).
  • Text Shadow: Multiple layers with increasing blur to simulate neon glow.
  • Background: Black background enhances the glow effect.

🔹 This already looks like a neon sign! But we can enhance it further.

3. Enhancing the Neon Effect with CSS Animations

Now, let’s add a pulsating glow animation to make it look more dynamic.

Updated CSS

@keyframes neonGlow {
    0% {
        text-shadow: 
            0 0 5px #0ff,
            0 0 10px #0ff,
            0 0 20px #0ff,
            0 0 40px #00ffff,
            0 0 80px #00ffff;
    }
    50% {
        text-shadow: 
            0 0 10px #0ff,
            0 0 20px #0ff,
            0 0 30px #0ff,
            0 0 60px #00ffff,
            0 0 100px #00ffff;
    }
    100% {
        text-shadow: 
            0 0 5px #0ff,
            0 0 10px #0ff,
            0 0 20px #0ff,
            0 0 40px #00ffff,
            0 0 80px #00ffff;
    }
}

.neon-text {
    animation: neonGlow 1.5s infinite alternate;
}

Explanation

  • @keyframes neonGlow gradually changes the shadow’s intensity.
  • animation: neonGlow 1.5s infinite alternate; makes the text glow and pulse continuously.

4. Adding a Flickering Effect Using jQuery

Neon signs flicker sometimes. We can simulate this effect with jQuery.

Include jQuery in HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>

Flickering Effect (script.js)

$(document).ready(function() {
    setInterval(function() {
        $(".neon-text").css("opacity", Math.random() * 0.6 + 0.4);
    }, 200);
});

Explanation

  • setInterval runs every 200ms to change opacity randomly.
  • This creates a flickering effect like real neon lights.

5. Creating Interactive Neon Effects (Hover & Click)

We can add a hover effect that changes the color of the neon text dynamically.

Updated CSS

.neon-text:hover {
    color: #ff00ff;
    text-shadow: 
        0 0 5px #ff00ff,
        0 0 10px #ff00ff,
        0 0 20px #ff00ff,
        0 0 40px #ff00ff,
        0 0 80px #ff00ff;
}

jQuery Click Event for Changing Colors

$(document).ready(function() {
    $(".neon-text").click(function() {
        let colors = ["#0ff", "#ff00ff", "#ff4500", "#00ff00"];
        let randomColor = colors[Math.floor(Math.random() * colors.length)];
        $(this).css({
            "color": randomColor,
            "text-shadow": `0 0 5px ${randomColor}, 0 0 10px ${randomColor}, 0 0 20px ${randomColor}, 0 0 40px ${randomColor}, 0 0 80px ${randomColor}`
        });
    });
});

Explanation

  • On Click: The text color randomly changes to one of four predefined neon colors.
  • text-shadow updates dynamically to match the new color.

6. Optimizing Performance for Smooth Animations

To ensure smooth performance:

  • Use requestAnimationFrame() for animations.
  • Reduce setInterval frequency (200ms is good).
  • Avoid too many heavy animations on a single page.

7. Ensuring Cross-Browser Compatibility

Neon effects work on modern browsers, but for better compatibility:

  • Use -webkit-text-shadow for Safari.
  • Add fallback styles for older browsers.

Example:

.neon-text {
    text-shadow: 0 0 10px #0ff;
    -webkit-text-shadow: 0 0 10px #0ff;
}

We have successfully created a neon text effect using CSS and jQuery with:
✅ Basic glowing effect using text-shadow.
✅ Animating the glow for a pulsing effect.
✅ Adding a flickering effect with jQuery.
✅ Making it interactive with hover and click events.
✅ Optimizing performance and ensuring cross-browser support.

Try implementing these techniques in your next web project to create stunning neon text animations!

Leave a Reply

Your email address will not be published. Required fields are marked *