Представляю вашему вниманию бесплатные неоновые эффекты для текста на CSS.

1. Переливающийся неоновый текст

Совместимые браузеры:Chrom, Firefox, Opera, Safari.

Разметка HTML

<div class="neon">
 <span class="text" data-text="thanks">thanks</span>
 <span class="gradient"></span>
 <span class="spotlight"></span>
</div>

Стили CSS

.neon {
 position: relative;
 overflow: hidden;
 filter: brightness(200%);
}

.text {
 background-color: black;
 color: white;
 font-size: 180px;
 font-weight: bold;
 font-family: sans-serif;
 text-transform: uppercase;
 position: relative;
 user-select: none;
}

.text::before {
 content: attr(data-text);
 position: absolute;
 color: white;
 filter: blur(0.02em);
 mix-blend-mode: difference;
}

.gradient {
 position: absolute;
 background: linear-gradient(45deg, red, gold, lightgreen, gold, red);
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 mix-blend-mode: multiply;
}

.spotlight {
 position: absolute;
 top: -100%;
 left: -100%;
 right: 0;
 bottom: 0;
 background: 
 radial-gradient(
 circle,
 white,
 transparent 25%
 ) center / 25% 25%,
 radial-gradient(
 circle,
 white,
 black 25%
 ) center / 12.5% 12.5%;
 animation: light 5s linear infinite;
 mix-blend-mode: color-dodge;
}

@keyframes light {
 to {
 transform: translate(50%, 50%);
 }
}

2. Мерцающий эффект неоновой вывески с использованием css и тени

Совместимые браузеры:Chrom, Firefox, Opera, Safari.

Разметка HTML

<h1 contenteditable spellcheck="false">open</h1>

Стили CSS

@import url(https://fonts.googleapis.com/css?family=Exo+2:200i);

:root {
 /* Base font size */
 font-size: 10px; 
 
 /* Set neon color */
 --neon-text-color: #f40;
 --neon-border-color: #08f;
}
 h1 {
 font-size: 13rem;
 font-weight: 200;
 font-style: italic;
 color: #fff;
 padding: 4rem 6rem 5.5rem;
 border: 0.4rem solid #fff;
 border-radius: 2rem;
 text-transform: uppercase;
 animation: flicker 1.5s infinite alternate; 
}
 h1::-moz-selection {
 background-color: var(--neon-border-color);
 color: var(--neon-text-color);
}
 h1::selection {
 background-color: var(--neon-border-color);
 color: var(--neon-text-color);
}
 h1:focus {
 outline: none;
}
 /* Animate neon flicker */
@keyframes flicker {
 
 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
 
 text-shadow:
 -0.2rem -0.2rem 1rem #fff,
 0.2rem 0.2rem 1rem #fff,
 0 0 2rem var(--neon-text-color),
 0 0 4rem var(--neon-text-color),
 0 0 6rem var(--neon-text-color),
 0 0 8rem var(--neon-text-color),
 0 0 10rem var(--neon-text-color);
 
 box-shadow:
 0 0 .5rem #fff,
 inset 0 0 .5rem #fff,
 0 0 2rem var(--neon-border-color),
 inset 0 0 2rem var(--neon-border-color),
 0 0 4rem var(--neon-border-color),
 inset 0 0 4rem var(--neon-border-color); 
 }
 
 20%, 24%, 55% { 
 text-shadow: none;
 box-shadow: none;
 } 
}

3. CSS NEON

Простой анимированный неоновый эффект, созданный с помощью CSS.

Совместимые браузеры:Chrom, Firefox, Opera, Safari.

Разметка HTML

<div class="sign">
 <span class="sign__word">no</span>
 <span class="sign__word">festival</span>
 <span class="sign__word">today</span>
</div>

Стили CSS

/*-- Sign Styles --*/

.sign {
 min-height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;

&__word {
 font-size: 5.6rem;
 text-align: center;
 line-height: 1;
 color: #c6e2ff;
 animation: neon .08s ease-in-out infinite alternate;
 }

}

/*-- Animation Keyframes --*/

// animation

@keyframes neon {
 from {
 text-shadow:
 0 0 6px rgba(202,228,225,0.92),
 0 0 30px rgba(202,228,225,0.34),
 0 0 12px rgba(30,132,242,0.52),
 0 0 21px rgba(30,132,242,0.92),
 0 0 34px rgba(30,132,242,0.78),
 0 0 54px rgba(30,132,242,0.92);
 }
 to {
 text-shadow:
 0 0 6px rgba(202,228,225,0.98),
 0 0 30px rgba(202,228,225,0.42),
 0 0 12px rgba(30,132,242,0.58),
 0 0 22px rgba(30,132,242,0.84),
 0 0 38px rgba(30,132,242,0.88),
 0 0 60px rgba(30,132,242,1);
 }
}

4. Неоновый эффект

Совместимые браузеры:Chrom, Firefox, Opera, Safari.

Разметка HTML

<div class="container">
 <h1 class="neon">Все, что вы хотите, это на другой стороне страха</h1>
</div>

Стили CSS

h1 {
 font-weight: 400;
 text-align: center;
 text-transform: uppercase;
}

.neon {
 color: #fff;
 text-shadow:
 0 0 5px #fff,
 0 0 10px #fff,
 0 0 20px #fff,
 0 0 40px #0ff,
 0 0 80px #0ff,
 0 0 90px #0ff,
 0 0 100px #0ff,
 0 0 150px #0ff;
}

5. НЕОНОВЫЙ ПОТОК

Пульсирующая неоновая вывеска сделана с использованием многих обложила text-shadowС.

Совместимые браузеры:Chrom, Firefox, Opera, Safari.

Разметка HTML

<div class="container">
 <div class="neon">Neon </div>
 <div class="flux">Flux </div>
</div>

Стили CSS

@font-face {
 font-family: neon;
 src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf);
}

<.container br=""> display: table-cell;
 text-align: center;
 vertical-align: middle;
}

.neon {
 font-family: neon;
 color: #FB4264;
 font-size: 9vw;
 line-height: 9vw;
 text-shadow: 0 0 3vw #F40A35;
}

.flux {
 font-family: neon;
 color: #426DFB;
 font-size: 9vw;
 line-height: 9vw;
 text-shadow: 0 0 3vw #2356FF;
}

.neon {
 animation: neon 1s ease infinite;
 -moz-animation: neon 1s ease infinite;
 -webkit-animation: neon 1s ease infinite;
}

@keyframes neon {
 0%,
 100% {
 text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
 color: #FED128;
 }
 50% {
 text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
 color: #806914;
 }
}

.flux {
 animation: flux 2s linear infinite;
 -moz-animation: flux 2s linear infinite;
 -webkit-animation: flux 2s linear infinite;
 -o-animation: flux 2s linear infinite;
}

@keyframes flux {
 0%,
 100% {
 text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
 color: #28D7FE;
 }
 50% {
 text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;
 color: #146C80;
 }
}