logo

👋 Эффект неонового текста на CSS

👋  Эффект неонового текста на CSS
👋 Эффект неонового текста на CSS

Для получения данного эффекта мы будем использовать CSS свойство text-shadow, особенностью которого является возможность создания множественных теней, перечисленных через запятую

HTML разметка ⤵️

WebTaverna



CSS стили ⤵️
.neon-text {
color: #fff;
text-shadow:
0 0 1px #fff,
0 0 2px #fff,
0 0 5px #fff,
0 0 11px #b60aff,
0 0 20px #b60aff,
0 0 30px #b60aff,
0 0 55px #b60aff,
0 0 80px #b60aff;
}

Данное свойство принимает 4 параметра
text-shadow: [x-offset] [y-offset] [blur-radius] [color];

🔜 x-offset - определяют горизонтальное смещение тени
🔜 y-offset - определяют вертикальное смещение тени
🔜 blur-radius - радиус размытия тени
🔜 color - устанавливает цвет тени

👍- если было полезно | ➡️ WebTaverna

Канал источник:@WebTaverna