Неоновый текст на css

Содержание:

Вариант 4:
Конструктор Неоновых надписей и текстов с анимацией красивым шрифтом
Вариант 3:
Вариант 2:
Вариант 1:
Конструктор надписей и текстов с анимацией падающих / поднимающихся букв красивым шрифтом
Конструктор Shattering надписей и текстов с анимацией разрушения красивым шрифтом
Конструктор надписей из неновых светящихся букв с анимацией
Конструктор Градиент надписей и текстов с анимацией красивым шрифтом

Вариант 4:

Вариант, похожий на предыдущий, только загораются и тухнут определенные буквы

Неоновый текст

1
2
3

</div>

.sign-wrap-4 {
background: #337AB7;
text-align: center;
padding: 60px 20px;
}
.sign-wrap-4 .sign_word {
font-size: 40px;
font-weight: bold;
line-height: 50px;
color: #FFF;
font-family: ‘Roboto Condensed’, sans-serif;
text-transform: uppercase;
text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #BFE2FF, 0 0 0.5em #BFE2FF, 0 0 0.1em #BFE2FF;
}
.sign-wrap-4 .sign_word span {
animation: neon-4 linear infinite 2s;
}
@keyframes neon-4 {
78% {
color: inherit;
text-shadow: inherit;
}
79%{
color: #0b3960;
}
80% {
text-shadow: none;
}
81% {
color: inherit;
text-shadow: inherit;
}
82% {
color: #0b3960;
text-shadow: none;
}
83% {
color: inherit;
text-shadow: inherit;
}
92% {
color: #0b3960;
text-shadow: none;
}
92.5% {
color: inherit;
text-shadow: inherit;
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

.sign-wrap-4 {

background#337AB7;

text-aligncenter;

padding60px20px;

}

.sign-wrap-4 .sign_word {

font-size40px;

font-weightbold;

line-height50px;

color#FFF;

font-family’Roboto Condensed’,sans-serif;

text-transformuppercase;

text-shadow-40px100px,2px,1em#BFE2FF,0.5em#BFE2FF,0.1em#BFE2FF;

}

.sign-wrap-4 .sign_word span {

animationneon-4linearinfinite2s;

}

@keyframes neon-4 {

78% {

colorinherit;

text-shadowinherit;

}

79%{

color#0b3960;

}

80% {

text-shadownone;

}

81% {

colorinherit;

text-shadowinherit;

}

82% {

color#0b3960;

text-shadownone;

}

83% {

colorinherit;

text-shadowinherit;

}

92% {

color#0b3960;

text-shadownone;

}

92.5% {

colorinherit;

text-shadowinherit;

}

Конструктор Неоновых надписей и текстов с анимацией красивым шрифтом

3d ретровейв текст надпись с обводной свечением высотой 3д эффекта

Сохранить

Текст, шрифт

Цвета,Фон

Анимация

Экран

Текст
Текст:

Шрифт:
HelveticaNeueCyrBloggerSansArcadia-BoldHelveticaNeueCyrNicknameDKBlackBambooCTCSplashRoundedKuraleBoughLirussTYGRADrinaPlanetN2ArciformSansMonplesirMarshStencilPlainotDublonCColumnSimpleMullerThinRomeoRUSBedrockCCAdamKubertMorningGloryBatmanForeverEnchantedLandPH100CondCapsRibbonHeartVALStencilcyrCitricaCyrillicReginaKursivItalicZettaPapyrusSlotCyrillicAstakhovSkinPirouCyrillicSnowForSantaOrbitronWerfusPFHandbookProThinIcekingdomElevatePERSONALAstakhovDishedSevillaDecorCellblockNBPBudmoJigglerCyrCricketNormalAtibaCyrillicFreakomixbyAvdoManProHarryPotterAmericanTextCJazzBallVoxRegularAstakhovDishedGlamourPanforteProProbaNav2RegularLDSlenderNEXTART-LightAstakhovFirstABRegularOldKingC-BoldMerkurVEGeorgianBrushAlbertusMediumEskalFont4YouAstrocyrWarfaceRedisTYGRAOldComedyBuccaneerMunchkinCyrChocolatesovietfontCocaColaBrandbePhenomenaaMavickFontMarkerFeltWideAlabamaEurotypeClobberinTimeBadaBoomBBAmericanCaptainCyberfallPixelDigivolveCgFiorelloPacmaniaRoddenberryVideopacAmphiWoWSlFKGUpheavalProRealizeMyPassionOldRosaNormalGagalinGTAPricedownVAGWorldBoldkrestikPFHellenicaSerifProSnowstormSnowstormInlineKramolaSmesharikiCOLORADOIIICOLORADOIOICOLORADOXGOSTtypeAAstakhovvitrageAstakhovpastelMonsterHighKomikaAxisPeaceSansSporedomRUSMartAWXRotondaKarminaWidefaceAWXssdrebedenCassandraElzevirLobsterKittyKatJuraLightMarmeladRegularBIPFuturaRoundTiProunNormalLCDNOVAAnnabelleStudioScriptCTTSTRTBicubikTagirCTTNormalBirchCTTinformKursivcArchangelskZionTrainAeroMaticsStencilMetroModernzopaPlayDictDsjapancyrMetroloxRunicDSCopticDSSupervixenCyrBreezeScriptoramaScriptSSKPorscheFloydianCyrLCChalkOLGACDsBrushesAnfisaGroteskMasonDisneyParkAmericanRetroPudelinaMolotNiseSegaNFSJLtvNeuropolDeusExHarryPotterFriendsDSRabbitKonkordRetroLCBlowzyTopazSeedsCyrMediumWenatcheeKBVectroidZhiznVogueCyrUnderdogGlideSketchCitricaCompoShadowBeastVsButtercrumbEtudeBMspiralProunxAWithSerifsArtemisDecoToscaniaIntruderArianGrqiAuctionArroTerminalNeuchaComicSansMSCaviarDreamsHauptbahnhofChaLimousinesAdLibWin95BTDSStamperChinaCyrGOSTtypeACalligraphCampanellaSladkoeshkaMartadecoronePteroqueMinecraftChocogirlKBBandRoundScriptTaurusParsekFuroreFlowObelixProCorinthiaRosaMarenaACampusTECHDTangoDiMBThinkTwiceBedrockCHondaCAlbionicTitulInflMachinaNovaBrkDarthEmilArctikascriptBistrocTokioFedericoLarisaScriptB52TeddyBearRupsterScriptGoosePoddCyrSirCliveACampusGravBoldMoonlightFlowerchildKonstruktoDecoMatterhorncttMontblancSTALKERARCH2DitedHardpixelLegendeCTechno28AmericanCaptainResagokrZnikomitNo24ZnikomitNo24ThinTexgyreAdventorWolgastTwoArtDecorinaMedievalEnglishAmoreMBDemonicAliceComfortaaParizhelPompadurChibolaSeminariaStradivariMoyenageProletariatHermannGotischBalloonXBdBalloonOlympiaDecoVarieteBirusaReginaKursivConkordiaNewRecordMayaEpsilXiomaraPasadenaDecoRomanaScriptJuliaScriptConnieRegularRepivmanuscSochi2014RegularGramoclerictonTetraclerictonInkyLeokadiaDecoMatreshkaEuroferenceProtoSansUndergradUltrathinAvdiraRGrishenkoBangWhackPowInfinityPaintItDarkSangBleuSumkinTypefaceEyelevation6AAHigherupAlfavitaPoiretOneRegularIronRussianAleksandraCDurazkyCaptchaCodeOwnHandNiseSegaAAHaymakerAANeonOOSTROVKARDONboldIOCONDIOSMovieLettersFabryka4FRUSCHEAPSTEAngryBirdsAAMagnumRUSwolfensteinTamilaParanoiaMLikesBoomboomVelesRKobzarKSNEON1NeonDLNeonOLNeonGFTOdlNickainleyCyberpunkSGMLIIAppetiteNewLavanderiaC
Размер шрифта (px):

Стиль текста:
NormalBoldItalicItalic Bold

Цвета и свечение

Цвет букв
Цвет выкл. букв

Свечение 1цвет, радиус (px), размытие (px), интенсивность (%)

Свечение 2цвет, радиус (px), размытие (px), интенсивность (%)

Теньцвет, радиус (px), размытие (px), интенсивность (%)

Тень: смещение X (px), смещение Y (px)

Фон

Цвет фона:

Изображение:
Удалить изображение

Парамерты анимации мерцания букв:
Номера букв через запятую, время от начала анимации до мерцания (с), кол-во мерцаний, не горит в течении (мс), горит в течении (мс)

№ Б

↻

▌▌

►

+
—

Параметры анимации

Время анимации (с):

Размер области

Ширина области (px):

Высота области (px):

34%

Вариант 3:

Текст надпись с обводкой контуром настройка ширины цвета обводки

Загорающийся и потухающий текст

Неоновый текст

<div class=»sign-wrap-3″>
<span class=»sign_word»>Неоновый текст</span>
</div>

1
2
3

<span class=»sign_word»>Неоновый текст</span>

</div>

.sign-wrap-3 {
background: #337AB7;
text-align: center;
padding: 60px 20px;
}
.sign-wrap-3 .sign_word {
font-size: 40px;
font-weight: bold;
line-height: 50px;
color: #FFF;
font-family: ‘Roboto Condensed’, sans-serif;
text-transform: uppercase;
animation: neon-3 5s steps(1, start) infinite reverse;
}
@keyframes neon-3 {
0%{
color: #0b3960;
text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960;
}
80%{
color: #fff;
text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
}
81%{
color: #E1F5FE;
text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
}
82%{color: #0b3960;
text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960;
}
83%{
color: #E1F5FE;
text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
}
84%{
color: #0b3960;
text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960;
}
85%{
color: #E1F5FE;
text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc;
}
100%{
color: #0b3960;
text-shadow: 0 0 7px #0b3960,0 0 8px #0b3960;
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

.sign-wrap-3 {

background#337AB7;

text-aligncenter;

padding60px20px;

}

.sign-wrap-3 .sign_word {

font-size40px;

font-weightbold;

line-height50px;

color#FFF;

font-family’Roboto Condensed’,sans-serif;

text-transformuppercase;

animationneon-35ssteps(1,start)infinitereverse;

}

@keyframes neon-3 {

0%{

color#0b3960;

text-shadow7px#0b3960,8px#0b3960;

}

80%{

color#fff;

text-shadow6px#fff,010px#fff,050px#79a7fc;

}

81%{

color#E1F5FE;

text-shadow6px#fff,010px#fff,050px#79a7fc;

}

82%{color#0b3960;

text-shadow7px#0b3960,8px#0b3960;

}

83%{

color#E1F5FE;

text-shadow6px#fff,010px#fff,050px#79a7fc;

}

84%{

color#0b3960;

text-shadow7px#0b3960,8px#0b3960;

}

85%{

color#E1F5FE;

text-shadow6px#fff,010px#fff,050px#79a7fc;

}

100%{

color#0b3960;

text-shadow7px#0b3960,08px#0b3960;

}

Вариант 2:

3д gif текст надпись с анимацией вращения по осям вертикали, горизонтали

Вариант, похожий на первый, только с более медленным миганием

Неоновый текст

<div class=»sign-wrap-2″>
<span class=»sign_word»>Неоновый текст</span>
</div>

1
2
3

<span class=»sign_word»>Неоновый текст</span>

</div>

.sign-wrap-2 {
background: #337AB7;
text-align: center;
padding: 60px 20px;
}
.sign-wrap-2 .sign_word {
font-size: 40px;
font-weight: bold;
line-height: 50px;
color: #FFF;
font-family: ‘Roboto Condensed’, sans-serif;
text-transform: uppercase;
animation: 2s neon-2 alternate-reverse infinite;
}
@keyframes neon-2 {
from {
text-shadow: 0 0 5px #FFF,
0 0 10px #FFF,
0 0 15px #FFF,
0 0 20px #BFE2FF;
}
to {
text-shadow: 0 0 20px #BFE2FF,
0 0 35px #BFE2FF,
0 0 40px #BFE2FF,
0 0 50px #BFE2FF,
0 0 800px #BFE2FF;
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.sign-wrap-2 {

background#337AB7;

text-aligncenter;

padding60px20px;

}

.sign-wrap-2 .sign_word {

font-size40px;

font-weightbold;

line-height50px;

color#FFF;

font-family’Roboto Condensed’,sans-serif;

text-transformuppercase;

animation2sneon-2alternate-reverseinfinite;

}

@keyframes neon-2 {

from {

text-shadow5px#FFF,

10px#FFF,

15px#FFF,

20px#BFE2FF;

}

to {

text-shadow20px#BFE2FF,

35px#BFE2FF,

40px#BFE2FF,

50px#BFE2FF,

800px#BFE2FF;

}

Вариант 1:

Простой вариант с мигающим текстом

Неоновый текст

<div class=»sign-wrap-1″>
<span class=»sign_word»>Неоновый текст</span>
</div>

1
2
3

<span class=»sign_word»>Неоновый текст</span>

</div>

.sign-wrap-1 {
background: #337AB7;
text-align: center;
padding: 60px 20px;
}
.sign-wrap-1 .sign_word {
font-size: 40px;
font-weight: bold;
line-height: 50px;
color: #FFF;
font-family: ‘Roboto Condensed’, sans-serif;
text-transform: uppercase;
animation: neon-1 .1s ease-in-out infinite alternate;
}
@keyframes neon-1 {
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(191, 226, 255, 0.52), 0 0 21px rgba(191, 226, 255, 0.92), 0 0 34px rgba(191, 226, 255, 0.78), 0 0 54px rgba(191, 226, 255, 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(191, 226, 255, 0.58), 0 0 22px rgba(191, 226, 255, 0.84), 0 0 38px rgba(191, 226, 255, 0.88), 0 0 60px #FFF;
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.sign-wrap-1 {

background#337AB7;

text-aligncenter;

padding60px20px;

}

.sign-wrap-1 .sign_word {

font-size40px;

font-weightbold;

line-height50px;

color#FFF;

font-family’Roboto Condensed’,sans-serif;

text-transformuppercase;

animationneon-1.1sease-in-outinfinitealternate;

}

@keyframes neon-1 {

from {

text-shadow6pxrgba(202,228,225,0.92),30pxrgba(202,228,225,0.34),12pxrgba(191,226,255,0.52),21pxrgba(191,226,255,0.92),34pxrgba(191,226,255,0.78),54pxrgba(191,226,255,0.92);

}

to {

text-shadow6pxrgba(202,228,225,0.98),30pxrgba(202,228,225,0.42),12pxrgba(191,226,255,0.58),22pxrgba(191,226,255,0.84),38pxrgba(191,226,255,0.88),60px#FFF;

}

Конструктор надписей и текстов с анимацией падающих / поднимающихся букв красивым шрифтом

Сохранить
Запустить

Текст, шрифт

Цвета,Фон

Анимация

Экран

Текст
Текст:
Шрифт:
HelveticaNeueCyrBloggerSansArcadia-BoldHelveticaNeueCyrNicknameDKBlackBambooCTCSplashRoundedKuraleBoughLirussTYGRADrinaPlanetN2ArciformSansMonplesirMarshStencilPlainotDublonCColumnSimpleMullerThinRomeoRUSBedrockCCAdamKubertMorningGloryBatmanForeverEnchantedLandPH100CondCapsRibbonHeartVALStencilcyrCitricaCyrillicReginaKursivItalicZettaPapyrusSlotCyrillicAstakhovSkinPirouCyrillicSnowForSantaOrbitronWerfusPFHandbookProThinIcekingdomElevatePERSONALAstakhovDishedSevillaDecorCellblockNBPBudmoJigglerCyrCricketNormalAtibaCyrillicFreakomixbyAvdoManProHarryPotterAmericanTextCJazzBallVoxRegularAstakhovDishedGlamourPanforteProProbaNav2RegularLDSlenderNEXTART-LightAstakhovFirstABRegularOldKingC-BoldMerkurVEGeorgianBrushAlbertusMediumEskalFont4YouAstrocyrWarfaceRedisTYGRAOldComedyBuccaneerMunchkinCyrChocolatesovietfontCocaColaBrandbePhenomenaaMavickFontMarkerFeltWideAlabamaEurotypeClobberinTimeBadaBoomBBAmericanCaptainCyberfallPixelDigivolveCgFiorelloPacmaniaRoddenberryVideopacAmphiWoWSlFKGUpheavalProRealizeMyPassionOldRosaNormalGagalinGTAPricedownVAGWorldBoldkrestikPFHellenicaSerifProSnowstormSnowstormInlineKramolaSmesharikiCOLORADOIIICOLORADOIOICOLORADOXGOSTtypeAAstakhovvitrageAstakhovpastelMonsterHighKomikaAxisPeaceSansSporedomRUSMartAWXRotondaKarminaWidefaceAWXssdrebedenCassandraElzevirLobsterKittyKatJuraLightMarmeladRegularBIPFuturaRoundTiProunNormalLCDNOVAAnnabelleStudioScriptCTTSTRTBicubikTagirCTTNormalBirchCTTinformKursivcArchangelskZionTrainAeroMaticsStencilMetroModernzopaPlayDictDsjapancyrMetroloxRunicDSCopticDSSupervixenCyrBreezeScriptoramaScriptSSKPorscheFloydianCyrLCChalkOLGACDsBrushesAnfisaGroteskMasonDisneyParkAmericanRetroPudelinaMolotNiseSegaNFSJLtvNeuropolDeusExHarryPotterFriendsDSRabbitKonkordRetroLCBlowzyTopazSeedsCyrMediumWenatcheeKBVectroidZhiznVogueCyrUnderdogGlideSketchCitricaCompoShadowBeastVsButtercrumbEtudeBMspiralProunxAWithSerifsArtemisDecoToscaniaIntruderArianGrqiAuctionArroTerminalNeuchaComicSansMSCaviarDreamsHauptbahnhofChaLimousinesAdLibWin95BTDSStamperChinaCyrGOSTtypeACalligraphCampanellaSladkoeshkaMartadecoronePteroqueMinecraftChocogirlKBBandRoundScriptTaurusParsekFuroreFlowObelixProCorinthiaRosaMarenaACampusTECHDTangoDiMBThinkTwiceBedrockCHondaCAlbionicTitulInflMachinaNovaBrkDarthEmilArctikascriptBistrocTokioFedericoLarisaScriptB52TeddyBearRupsterScriptGoosePoddCyrSirCliveACampusGravBoldMoonlightFlowerchildKonstruktoDecoMatterhorncttMontblancSTALKERARCH2DitedHardpixelLegendeCTechno28AmericanCaptainResagokrZnikomitNo24ZnikomitNo24ThinTexgyreAdventorWolgastTwoArtDecorinaMedievalEnglishAmoreMBDemonicAliceComfortaaParizhelPompadurChibolaSeminariaStradivariMoyenageProletariatHermannGotischBalloonXBdBalloonOlympiaDecoVarieteBirusaReginaKursivConkordiaNewRecordMayaEpsilXiomaraPasadenaDecoRomanaScriptJuliaScriptConnieRegularRepivmanuscSochi2014RegularGramoclerictonTetraclerictonInkyLeokadiaDecoMatreshkaEuroferenceProtoSansUndergradUltrathinAvdiraRGrishenkoBangWhackPowInfinityPaintItDarkSangBleuSumkinTypefaceEyelevation6AAHigherupAlfavitaPoiretOneRegularIronRussianAleksandraCDurazkyCaptchaCodeOwnHandNiseSegaAAHaymakerAANeonOOSTROVKARDONboldIOCONDIOSMovieLettersFabryka4FRUSCHEAPSTEAngryBirdsAAMagnumRUSwolfensteinTamilaParanoiaMLikesBoomboomVelesRKobzarKSNEON1NeonDLNeonOLNeonGFTOdlNickainleyCyberpunkSGMLIIAppetiteNewLavanderiaC
Размер шрифта (px):

Стиль текста:
NormalBoldItalicItalic Bold

Цвета

Цвет текста

Цвет фона

Тень (%):
Падающая тень (%):

Блик (%):
Макс затенённость букв (%):

Параметры анимации

Время падения (с):
Время анимации (с):* 0 — авто

Задержка (с):
Начало через (с):

Подъём букв

Подъём через (с):

Повторять

Размер области

Ширина области (px):

Высота области (px):

34%

Конструктор Shattering надписей и текстов с анимацией разрушения красивым шрифтом

Сохранить

Текст, шрифт

Цвета,Фон

Анимация

Экран

Стиль текста:
NormalBoldItalicItalic Bold

Цвет текста

Изображение:
Удалить изображение

Цвет фона

Фоновое изображение:
Удалить изображение

Параметры анимации

Время анимации (с):
Пауза до разделения(с):
Мин прозрачность частиц (%):
Разброс (0% — 500%):

Задержка (с):
Пауза после разделения(с):
Размер частиц (%):
Мин. разброс (0% — 500%):

Размер области

Ширина области (px):

Высота области (px):

34%

Конструктор надписей из неновых светящихся букв с анимацией

Сохранить

Текст, шрифт

Цвета,Фон

Анимация

Экран

Текст
Текст:

Стиль текста:
NormalBoldItalicItalic Bold

Цвета и свечение

Цвет букв
Цвет выкл. букв

Свечение 1цвет, радиус (px), размытие (px), интенсивность (%)

Свечение 2цвет, радиус (px), размытие (px), интенсивность (%)

Теньцвет, радиус (px), размытие (px), интенсивность (%)

Тень: смещение X (px), смещение Y (px)

Фон

Цвет фона:

Изображение:
Удалить изображение

№ Б

↻

▌▌

►

+
—

Параметры анимации

Время анимации (с):

Размер области

Ширина области (px):

Высота области (px):

34%

Конструктор Градиент надписей и текстов с анимацией красивым шрифтом

Сохранить

Текст, шрифт

Цвета,Фон

Анимация

Экран

Стиль текста:
NormalBoldItalicItalic Bold

Цвета, позиция (%):
+
—

Фон

Цвет фона:

Прозрачный цвет

Градиент и анимация

Наклон (°):

Растянуть (%):

Продолжительность анимации (с):

Размер области

Ширина области (px):

Высота области (px):

34%