Neon Text Effect with Blink Animation

HTML CSS JS Tidy

:root {
    --brand-primary: #44D688;
    --font-family-display: Monoton, Arial, sans-serif;
    --font-family-primary: 'Rubik', Arial, sans-serif;
    --neon-effect: 0 0 0 transparent, 0 0 20px rgb(0 255 247), 0 0 50px rgb(0 255 242 / 50%), 0 0 200px rgb(0 255 230 / 50%), 0 0 250px rgb(0 255 210), 0 0 300px rgb(0 254 255), -250px -100px 100px rgb(0 252 255);
}

html,
body {
    background-color: #000000;
    font-family: var(--font-family-primary);
    line-height: 1.42;
}

.hero {
    background-color: #000000;
    background: radial-gradient(ellipse at 33% 0%, #333 0%, #000 66%);
}

.hero-wrapper {
    display: flex;
    justify-content: center;
    margin: auto;
    width: 400px;
}

.hero-block {
    padding: 60px 0;
    text-align: center;
}

.hero-title {
    animation: neon-blink 5s infinite alternate;
    color: #88fff4;
    font-family: var(--font-family-display);
    font-size: 45px;
    font-weight: normal;
    margin: 0 auto;
    margin-bottom: 60px;
    margin-left: 2em;
    text-align: left;
    text-shadow: var(--neon-effect);
    text-transform: uppercase;
    transform: skew(0, -12deg) rotateZ(15deg);
    white-space: nowrap;
}

@media (min-width: 992px) {
    .hero-title {
        font-size: 86px;
        margin-bottom: 100px;
        margin-left: 1.5em;
    }
}

.hero-title strong {
    display: block;
    font-weight: normal;
    text-indent: -1.66em;
}

@keyframes neon-blink {
    44% {
        opacity: 1;
    }
    45% {
        opacity: .7;
    }
    46% {
        opacity: 1;
    }
    98% {
        opacity: 1;
    }
    99% {
        opacity: .5;
    }
    100% {
        opacity: 1;
    }
}

HTML CSS JS Tidy

Neon Text Effect with Blink Animation

>_Console

Leave a Comment Cancel reply

>_Console

File Setting

Code Playground Setting

Add External Stylesheets and Script

Leave a Comment Cancel reply