Blur Effect on Navigation Bar – CSS3 Transition


There are many transitions in CSS3, I’ve shared a few of them before, and I’m sharing another one today.

This is blur effect transition. You can use it anywhere, I tried it with the navigation bar and the result was pretty amazing. You can check the result in demo.

This little tutorial is especially helpful for beginning web designers and everyone who likes to work with CSS3.

If you like this tutorial, you should also check out the glowing text effect that we created using pure CSS. You can also check out the CSS3 navigation bar explosion effect tutorial.

Below you can find the HTML code and CSS code to create this effect. Of course, HTML code isn’t important here, that’s just to provide the data so that the transition/effect can be applied on.

CSS3 Blur Effect

Live Demo


<ul class="menu">
 <li><a href="#">Designzzz</a></li>
 <li><a href="#">Photography</a></li>
 <li><a href="#">Coding</a></li>
 <li><a href="#">Applications</a></li>
 <li><a href="#">Portfolio</a></li>
 <li><a href="#">Contact</a></li>

CSS Code

padding: 0px;
margin: 0 0 10px 0;
position: relative;
border: 2px #333 solid;
box-shadow:1px 2px 3px #666;
-moz-box-shadow:1px 2px 3px #666;
-webkit-box-shadow:1px 2px 3px #666;
-o-box-shadow:1px 2px 3px #666;
-ms-box-shadow:1px 2px 3px #666;
.menu li{
font-size: 20px;
display: block;
.menu li a{
color: transparent;
display: block;
text-transform: uppercase;
text-shadow: 0px 0px 5px #fff;
letter-spacing: 1px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
.menu:hover li a{
text-shadow: 0px 0px 5px #c4c4c4;
.menu li a:hover{
color: #fff;
text-shadow: 0px 0px 1px #fff;
padding-left: 10px;

Live Demo

Further Related Readings

Copyrights © 2016 - Designzzz. All Rights Reserved