Tuesday, 31 March 2020

Neon Light Text HTML & CSS

NEON LIGHT TEXT WITH CSS AND HTML



HTML CODE :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>neon</title>
</head>
<body>
    <div class="wrapper">
        <div class="neon-wrapper">
            <div class="neon-text">NEON LIGHT
            </div>
        </div>
    </div>
</body>
</html>

CSS CODE :


.wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

.neon-text {
    font-size: 14rem;
    color: #fa1e4e;
    text-shadow: .1vw 0vw .25vw #ffd8db, .2vw 0vw .25vw #ffd8db, .4vw 0vw .25vw #ffd8db,

        .1vw 0vw 0vw #f25757, .2vw 0vw 0vw #f25757, .4vw 0vw 0vw #f25757,
        .1vw 0vw .1vw #f25757, .2vw 0vw .1vw #f25757, .4vw 0vw .1vw #f25757,
        .1vw 0vw 2vw #f25757, .2vw 0vw 2vw #f25757, .4vw 0vw 2vw #f25757,

        .1vw 0vw 1vw #e50b0b, .2vw 0vw 1vw #e50b0b, .4vw 0vw 5vw #e50b0b,
        .1vw 0vw 5vw #e50b0b, .2vw 0vw 20vw #e50b0b, .4vw 0vw 10vw #e50b0b,
        .1vw 0vw 10vw #e50b0b, .2vw 0vw 30vw #e50b0b, .4vw 0vw 10vw #e50b0b;

}

post written by:

Related Posts

0 Reviews: