Neon text effect using html and css

code.lifeline -
0
Neon text effect using html and css
Neon text effect using html and css


In this article, we given a Neon text effect using html and css with source code to add on website or project. Try this project in your vs code to check how it works. We created a Neon text effect using html and css. Let's go and check the source code.


To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Neon-text-effect.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Then run the code or check the preview with code preview extension in vs code.

Neon text effect using html and css source code

Here we given a html and css source code of neon text effect as given -

HTML

In HTML, we added a text name as - code.lifeline.

<!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="style.css">
</head>
<body>
  <div class="neon-wrapper">
    <h1 class="neon-text">Code.lifeline</h1>
  </div>
</body>
</html>


CSS

In CSS, we made the text to glow with properties. Added animation to make it glowing and also we made it responsive.

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

.neon-wrapper {
  position: relative;
}

.neon-text {
  font-size: 4rem;
  color: #fff;
  text-align: center;
  font-family: 'Arial', sans-serif;
  text-transform: uppercase;
  margin: 0;
  position: relative;
  display: inline-block;
  animation: neon-animation 1.5s linear infinite alternate;
  border-radius: 10px; 
  padding: 20px 40px;
}

.neon-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  color: #00ff00;
  mix-blend-mode: overlay;
  border-radius: 10px;
}

@keyframes neon-animation {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #0ff, 0 0 70px #0ff, 0 0 80px #0ff, 0 0 100px #0ff, 0 0 150px #0ff;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #0ff, 0 0 35px #0ff, 0 0 40px #0ff, 0 0 50px #0ff, 0 0 75px #0ff;
  }
}

@media (max-width: 768px) {
  .neon-text {
    font-size: 3rem;
    padding: 15px 30px; 
  }
}

@media (max-width: 480px) {
  .neon-text {
    font-size: 2rem;
    padding: 10px 20px;
  }
}


Output

Check this output image of Neon text effect - 

Neon text effect using html and css


Also see this -

Hope this tutorial will help you to use Neon text effect using html and css with source code.if you have any confusion or query then you can contact us on our coding community.

Checkout more projects on our website and join our coding community on telegram to get more knowledge about coding.
Tags:
code.lifeline

Previous Post Next Post