Text-shadow not showing up-CodePudding

The text shadow property is not working

I am using google chrome for this

@import url('https://fonts.googleapis.com/css2?family=Smooch&display=swap');
body{
    font-family: 'Smooch', cursive;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #000;
}
h1{
    margin: 0;
    padding: 0;
    color: #111;
    font-size: 16em;
}
h1 span{
    display: table-cell;
    margin: 0;
    padding: 0;
    animation: animate 2s linear infinite;
}
h1 span:nth-child(1){
    animation-delay: 0s;
}
h1 span:nth-child(2){
    animation-delay: 0.25s;
}
h1 span:nth-child(3){
    animation-delay: 0.5s;
}
h1 span:nth-child(4){
    animation-delay: 0.75s;
}
h1 span:nth-child(5){
    animation-delay: 1s;
}
h1 span:nth-child(6){
    animation-delay: 1.25s;
}
h1 span:nth-child(7){
    animation-delay: 1.5s;
}
h1 span:nth-child(8){
    animation-delay: 11.75s;
}
@keyframes animate{
    0%,100%{
        color: #fff;
        filter: blur(2px);
        text-shadow: 0 0 10px, #00b3ff,
                     0 0 20px #00b3ff,
                     0 0 40px #00b3ff,
                     0 0 80px #00b3ff,
                     0 0 120px #00b3ff,
                     0 0 200px #00b3ff,
                     0 0 300px #00b3ff,
                     0 0 400px #00b3ff,;
    }
    5%,95%{
        color: #111;
        filter: blur(0px);
        text-shadow: 0 0 10px none,
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glowing |Text Animation</title>
    <link rel="stylesheet" href="glowingText.css">
</head>
<body>
    <h1>
        <span>P</span>
        <span>A</span>
        <span>R</span>
        <span>T</span>
        <span>H</span>
    </h1>
</body>
</html>

CodePudding user response：

You've put an extra comma

Here's the fixed code:

text-shadow: 0 0 10px #00b3ff,
             0 0 20px #00b3ff,
             0 0 40px #00b3ff,
             0 0 80px #00b3ff,
             0 0 120px #00b3ff,
             0 0 200px #00b3ff,
             0 0 300px #00b3ff,
             0 0 400px #00b3ff;

CodePudding user response：

See you put an extra comma on first and last line of text shadow property.

        text-shadow: 0 0 10px #00b3ff,
                 0 0 20px #00b3ff,
                 0 0 40px #00b3ff,
                 0 0 80px #00b3ff,
                 0 0 120px #00b3ff,
                 0 0 200px #00b3ff,
                 0 0 300px #00b3ff,
                 0 0 400px #00b3ff;

Just remove the extra commas and it will work fine. Here's a fiddle for the same: https://jsfiddle.net/pfec2vxk/