CSS Neon Effect

CSS Neon Effect

HTML
<div class="neon-effect">
    <h1>NEON EFFECT</h1>
</div> 
CSS
html,body{ 
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(0deg,rgba(6, 6, 6, 0.9),rgba(0, 0, 0, 0.9)),
	 url(https://images.pexels.com/photos/1227515/pexels-photo-1227515.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
 background-size: cover;
 display:flex;
 justify-content:center;
 align-items:center;
}
  
h1{
   text-shadow: 
     0 0 10px #c3178e, 
     0 0 15px #c3178e, 
     0 0 20px #c3178e, 
     0 0 25px #c3178e, 
     0 0 30px #c3178e, 
     0 0 35px #c3178e, 
     0 0 40px #c3178e;
     color: #f747c1;
     font-family: 'Monoton', cursive;
     font-size: 100px;
     letter-spacing: 4px;
}

DEMO

View Demo
446 Views
55030cookie-checkCSS Neon Effect

Leave a Reply

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