Hi Reader's

If you want to create text with blur effect using CSS3 or want to show blur effect on text using, you can do this by simply using CSS3 code. Below is an example of CSS3 blur effect.

Here I am posting Css3 Blur Effect it is a prefect example of blur effect ......Enjoy!!!!!!!

span {
    color: transparent;
    animation: blur 5s ease-out infinite;
    -webkit-animation: blur 5s ease-out infinite;
}

span:nth-child(1) {
    animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}
span:nth-child(2) {
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
span:nth-child(3) {
    animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
span:nth-child(4) {
    animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
}
span:nth-child(5) {
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
span:nth-child(6) {
    animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}
span:nth-child(7) {
    animation-delay: 0.7s;
    -webkit-animation-delay: 0.7s;
}

span:nth-child(8) {
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}



@keyframes blur {
    0%      {text-shadow:  0 0 100px #fff; opacity:0;}
    5%      {text-shadow:  0 0 90px #fff;}
    15%     {opacity: 1;}
    20%     {text-shadow:  0 0 0px #fff;}
    80%     {text-shadow:  0 0 0px #fff;}
    85%     {opacity: 1;}
    95%     {text-shadow:  0 0 90px #fff;}
    100%    {text-shadow:  0 0 100px #fff; opacity:0;}
}

@-webkit-keyframes blur {
    0%      {text-shadow:  0 0 100px #fff; opacity:0;}
    5%      {text-shadow:  0 0 90px #fff;}
    15%     {opacity: 1;}
    20%     {text-shadow:  0 0 0px #fff;}
    80%     {text-shadow:  0 0 0px #fff;}
    85%     {opacity: 1;}
    95%     {text-shadow:  0 0 90px #fff;}
    100%    {text-shadow:  0 0 100px #fff; opacity:0;}
}


<p>
        <span>E</span>
        <span>V</span>
        <span>O</span>
        <span>N</span>
        <span>T</span>
        <span>E</span>
        <span>C</span>
        <span>H</span>
    </p>

Output