Как создать неоновый эффект текста с помощью HTML и CSS

Хотите добавить потрясающий неоновый эффект к тексту на своем сайте? Все, что вам нужно, — это базовые знания HTML и CSS! Этот метод позволяет добиться уникального визуального эффекта, который привлекает внимание пользователей.

See the Pen Cosmic neon effect by Carmen Ansio (@carmenansio) on CodePen.

        HTML

  
  Показать код HTML
  
    
  <div class="name">
 <div class="cosmic" style="--color: #23b1d8" data-text="C">
 <span>C</span>
 </div>
 <div class="cosmic" style="--color: #dc5fe2" data-text="o">
 <span>o</span>
 </div>
 <div class="cosmic" style="--color: #b733f9" data-text="s">
 <span>s</span>
 </div>
 <div class="cosmic" style="--color: #a0de59" data-text="m">
 <span>m</span>
 </div>
 <div class="cosmic" style="--color: #83d1ad" data-text="i">
 <span>i</span>
 </div>
 <div class="cosmic" style="--color: #f7b500" data-text="c">
 <span>c</span>
 </div>
</div>

        CSS
 
  
  Показать код CSS
  
         
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
:root {
  --size: 120px;
  --font-size: 4rem;
}
 
body {
  box-sizing: border-box;
  --background: #252839;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--background);
  font-family: "Poppins", sans-serif;
}
 
.name {
  position: relative;
  display: flex;
}
 
.name .cosmic {
  position: relative;
  cursor: pointer;
  height: var(--size);
  display: flex;
  justify-content: center;
  align-items: center;
}
.name .cosmic span {
  font-size: var(--font-size);
  font-weight: 700;
  -webkit-text-stroke: 2px var(--color);
  color: transparent;
  transition: 0.5s;
}
.name .cosmic:hover span {
  opacity: 0;
}
 
.name .cosmic::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: var(--font-size);
  height: 0;
  font-weight: 700;
  overflow: hidden;
  transition: 0.6s ease-in-out;
  text-align: center;
  line-height: var(--size);
  color: var(--color);
}
.name .cosmic:hover::before {
  height: 100%;
  filter: drop-shadow(0 0 2rem var(--color));
}