💡 Projekt (10) Animated Neon Text Effect Free

CODE FREE

CSS3

.wrapper{
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
}

.txt{
    color: #fff;
    background: #000;

font-size: 50px;
    font-weight: bold;
    font-family: Arial;
    text-transform: uppercase;
}

.txt::before{
    content: 'CODE FREE';
    position: absolute;
    mix-blend-mode: difference;
    filter: blur(3px);

}
.neon-wrapper{
    display: inline-flex;
    filter: brightness(200%);
    overflow: hidden;
}
.gradient{
    background: linear-gradient(149.25442082519896deg, rgba(249, 87, 159,1) 5.046426561620709%,rgba(99, 36, 126,1) 94.35424873382104%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;

}
.dodge {
    background: radial-gradient(circle,#fff,#000000 20%) center / 25% 25%;
    position: absolute;
    top: -100%;
    left: -100%;
    right: 0;
    bottom: 0;
    mix-blend-mode: color-dodge;
    animation: dodge-area s linear infinite;
}
@keyframes dodge-area{
   to{
    transform: translate(50%,50%);
   } 
}

HTML 5

ATOM CRAFT MAXIMO

Szukaj na tym blogu

💡 Projekt (10) Animated Neon Text Effect Free | CSS tutorial code

Komentarze