How to Create an Awesome Blurry Menu Using CSS

Posted in Coding, HTML & CSS, Tutorials • Posted on 34 Comments

Today we will get a perfect and simple blurry menu effect via CSS. In addition to it, we will get a useful multiple borders effect. To achieve this effect you will need to have a basic understanding of HTML and CSS. We will work with IE filters and text-shadow, but there is no reason to worry if you have never used it, they’re all well and simply explained.

And the best part is that anything done here works almost anywhere, from IE6 to real browsers.

So, let’s work!

You can check the demo here. Source code can be downloaded from here .

Step 1 – Basic HTML

Let’s start defining our basic structure. There is nothing really impressive here. We will use:

  • <ul> & <li> – As a menu is an unordered list of elements, it must be inside a ul.
  • <div> – Actually, it could be removed. But for easier CSS implementation and positioning, we will use it.
  • <a> – Sure, a menu must contain links!

At the end of this step, your HTML should be something like this:


	Blurry Menu
<div id="blur">
<ul>
	<li>
				<a href="#">Home</a></li>
	<li>
				<a href="#">Blog</a></li>
	<li>
				<a href="#">Pet Projects</a></li>
	<li>
				<a href="#">Portfolio</a></li>
	<li>
				<a href="#">Services</a></li>
	<li>
				<a href="#">Contact</a></li>
</ul>
</div>

Sample of what this tutorial can do:

Step 2 – Basic CSS (with multiple borders!)


Now we are going to make a simple CSS style, positioning and giving some “life” to our menu.

Positioning and basic style

Let’s use a simple noise pattern as our body background, position the menu in the center and put all menu items side-by-side. Since we want some fancy borders, we’ll need some height in our <ul>. As you know, we’ll need a clearfix, right? No.

Wait, wait, wait. No clearfix? What about the floats?

There is a really simple way to correct this, just add “overflow: hidden” to <ul>. Instead of using all that clearfix mess, this single line does the same thing!

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Blurry Menu</title>
	<style type="text/css">
		body {
			background: #1a1a1a url(bg.jpg);
		}
			#blur {
				position: relative;
				top: 50px;
				width: 100%;
				border: 1px solid #000000;
				border-style: solid none;
			}
				#blur ul {
					position: relative;
					top: 0;
					width: 960px;
					margin: 0 auto;
					list-style-type: none;
					overflow: hidden;
				}
					#blur ul li {
						float: left;
						position: relative;
					}
						#blur ul li a {
							position: relative;
							float: left;
							padding: 20px 25px;
							margin-left: 10px;
							text-decoration: none;
							font-family: "trebuchet ms";
							font-variant: small-caps;
							color: #ffffca;
							z-index: 100;
						}
	</style>
</head>
<body>
	<div id="blur">
		<ul>
			[...]
		</ul>
	</div>
</body>

Multiple borders

As our friend Jeffrey Way has taught us, we can use :before and :after pseudo elements to create multiple borders in our elements. We will use that to create a smooth inset shadow effect.

It’s as easy as it seems, we just set “position: absolute” in our :after and :before and it can used to create multiple borders.

<style type="text/css">
		#blur:before {
			position: absolute;
			top: 0px;
			width: 100%;
			height: 100%;
			border-top: 1px solid #212121; /* top border! */
			content: '';
		}
		#blur:after {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 1px;
			border-bottom: 1px solid #212121; /* bottom border! */
			content: '';
		}
	</style>

Now I’ll make a little addition, we will use IE filters to make a similar effect in IE.

The filter that we use for this effect is progid:DXImageTransform.Microsoft.Shadow. This filter has 3 main parameters:

  • color – Shadow’s color. In this case we use #212121.
  • direction – 0~360 degrees. It’s useful to control where shadow should spread to.
  • strength – It controls the “amount” of shadow. We don’t want a shadow effect at all ( just “multiple border” ), so leaveit as zero.

We will use something like this in our case:

<!--[if IE]>
		<style type="text/css">
			#blur {
				-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)"; /* IE 8 */
				filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0); /* IE 7- */
			}
		</style>
	<![endif]-->

This is how the final border effect will look (zoomed):

You may be asking yourself now “Why not just use shadows in both cases?”. Well it is because we would need “inset shadow” plus a normal shadow, and most browsers have better support for pseudo elements. Anyway, you could use it as your own risk, for sure.

At the end of this step, you should have something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Blurry Menu</title>
	<style type="text/css">
		body {
			background: #1a1a1a url(bg.jpg);
		}
			#blur {
				position: relative;
				top: 50px;
				width: 100%;
				border: 1px solid #000000;
				border-style: solid none;
			}
				#blur:before {
					position: absolute;
					top: 0px;
					width: 100%;
					height: 100%;
					border-top: 1px solid #212121;
					content: '';
				}
				#blur:after {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 1px;
					border-bottom: 1px solid #212121;
					content: '';
				}
				#blur ul {
					position: relative;
					top: 0;
					width: 960px;
					margin: 0 auto;
					list-style-type: none;
					overflow: hidden;
				}
					#blur ul li {
						float: left;
						position: relative;
					}
						#blur ul li a {
							position: relative;
							float: left;
							padding: 20px 25px;
							margin-left: 10px;
							text-decoration: none;
							font-family: "trebuchet ms";
							font-variant: small-caps;
							color: #ffffca;
							z-index: 100;
						}
	</style>
	<!--[if IE]>
		<style type="text/css">
			#blur {
				-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)";
				filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0);
			}
		</style>
	<![endif]-->
</head>
<body>
	<div id="blur">
		<ul>
			<li>
				<a href="#">Home</a>
			</li>
			<li>
				<a href="#">Blog</a>
			</li>
			<li class="active">
				<a href="#">Pet Projects</a>
			</li>
			<li>
				<a href="#">Portfolio</a>
			</li>
			<li>
				<a href="#">Services</a>
			</li>
			<li>
				<a href="#">Contact</a>
			</li>
		</ul>
	</div>
</body>
</html>

Step 3 – Blurring things with CSS (IE included!)

Now, we will use text-shadow and more filters to make blurry elements.

For real browsers

All the magic is in the text-shadow and color combination.

  • Text-Shadow It will be set as 0 0 Npx #[color]. Where “N” controls the “radius” of the blur, and color sets the base color for the effect.
  • Color It will be set transparent. So the color will not “mess up” our blur with a sharp element.
/* blurry styles */
		#blur a {
			[...]
			color: transparent;
			text-shadow: 0 0 2px #cacaca;
			[...]
		}
	/* active styles */
		#blur .active a, #blur .active a:hover {
			color: #cacaca;
			text-shadow: 0 0 2px #cacaca;
		}

For IE

There is an incredible filter called progid:DXImageTransform.Microsoft.Blur, which will be useful to us at this point. We could use Shadow or even Glow filter, but the best final effect is surely with blur.

We will not need any parameter in this case, so just set up -ms-filter and filter.

<!--[if IE]>
		<style type="text/css">
			#blur {
				-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)";
				filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0);
			}
			#blur ul li a {
				-ms-filter:  "progid:DXImageTransform.Microsoft.Blur()";
				filter:  progid:DXImageTransform.Microsoft.Blur();
			}
		</style>
	<![endif]-->

You will get something like this:

Step 5 – hover settings

Well, just blurry elements won’t be really good for our users, right? So we will make all links “normal” on hover.

For this, we will just add a :hover and :focus CSS, to ensure that tabbed navigation will work as well.

This is our final HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blurry Menu</title>
	<style type="text/css">
		body {
			background: #1a1a1a url(bg.jpg);
		}
			#blur {
				position: relative;
				top: 50px;
				width: 100%;
				border: 1px solid #000000;
				border-style: solid none;
			}
				#blur:before {
					position: absolute;
					top: 0px;
					width: 100%;
					height: 100%;
					border-top: 1px solid #212121;
					content: '';
				}
				#blur:after {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 1px;
					border-bottom: 1px solid #212121;
					content: '';
				}
				#blur ul {
					position: relative;
					top: 0;
					width: 960px;
					margin: 0 auto;
					list-style-type: none;
					overflow: hidden;
				}
					#blur li {
						float: left;
						position: relative;
					}
						#blur a {
							position: relative;
							float: left;
							padding: 20px 25px;
							margin-left: 10px;
							text-decoration: none;
							font-family: "trebuchet ms";
							font-variant: small-caps;
							color: transparent;
							text-shadow: 0 0 2px #cacaca;
							z-index: 100;
						}
				/* normal styles */
					#blur a:hover, #blur a:focus {
						color: #ffffca;
						text-shadow: 0 0 0 transparent;
					}
				/* active styles */
					#blur .active a, #blur .active a:hover {
						color: #cacaca;
						text-shadow: 0 0 2px #cacaca;
					}
	</style>
	<!--[if IE]>
		<style type="text/css">
			#blur {
				-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0)";
				filter: progid:DXImageTransform.Microsoft.Shadow(color=#212121,direction=180,strength=0);
			}
			#blur ul li a {
				color: #ffffca;
				-ms-filter:  "progid:DXImageTransform.Microsoft.Blur()";
				filter:  progid:DXImageTransform.Microsoft.Blur();
			}
			#blur ul a:hover, #blur ul .active a, #blur ul a:focus {
				position: relative;
				margin: 2px 0 -10px 10px;
				-ms-filter:  "progid:DXImageTransform.Microsoft.Blur(enabled = false)";
				filter:  progid:DXImageTransform.Microsoft.Blur(enabled = false);
			}
		</style>
	<![endif]-->
	<!--[if lt IE 8]>
		<style type="text/css">
			#blur ul a:hover, #blur ul .active a {
				position: relative;
				margin: 2px 4px 0 10px;
				filter:  progid:DXImageTransform.Microsoft.Blur(enabled = false);
			}
		</style>
	<![endif]-->
</head>

<body>
	<div id="blur">
		<ul>
			<li>
				<a href="#">Home</a>
			</li>
			<li>
				<a href="#">Blog</a>
			</li>
			<li class="active">
				<a href="#">Pet Projects</a>
			</li>
			<li>
				<a href="#">Portfolio</a>
			</li>
			<li>
				<a href="#">Services</a>
			</li>
			<li>
				<a href="#">Contact</a>
			</li>
		</ul>
	</div>
</body>
</html>

Final Word

The good point about all this blur stuff is it opens your mind to all the opportunities available with CSS3 and filters. In a lot of cases we could just use CSS effects to create wonderful effects, and what’s even better: They are ALL really simple to change. You can dynamically add, remove, and edit these effects, so if you work with (or want to create) a theme structure it could actually save you a lot of time when you start developing multiple themes.

43 Written ArticlesWebsiteGoogle+

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

34 Comments Best Comments First
  • Alex

    Friday, April 22nd, 2011 13:16

    1

    great article, rochester! saw something similar just yesterday on css-tricks, where CSS3 animations are used to further enhance the blur effect: http://css-tricks.com/fun-with-blurred-text/
    btw: the link to your demo returns a 404 page.

    0
    • rochester

      Tuesday, April 26th, 2011 19:08

      7

      Thank you Alex!
      This is a really good article too, but my focus is in compatibility, but that “smoke” effect just blow my mind!

      0
  • Andy

    Wednesday, April 27th, 2011 13:01

    12

    Really great tutorial from start to finish. Just given this a go with your instructions and perfect first time, thank you! Looks brilliant too!

    0
    • Rochester Oliveira

      Thursday, April 28th, 2011 18:26

      14

      Thank you, Andy!

      You can do some tests with different colors, background.. You can do, for example, a “steamy bathroom mirror effect”, just adjusting background to white and blur to light gray :D

      []’s

      0
  • rochester

    Tuesday, April 26th, 2011 19:09

    11

    Hey iZabotin.. I just don’t know why this demo is not working, but you could use this link

    0
    • Jason

      Monday, October 17th, 2011 16:57

      26

      Great stuff, I love these types of tutorial, anything that can be CSS coded to achieve Flash style effects is always worth a read. An exciting time for CSS, the effects just keep getting better.

      0
      • Rochester Oliveira

        Tuesday, October 25th, 2011 13:45

        27

        Hey Jason,

        Agreed! CSS3 has a pretty good support, so we could use it for almost anything!

        []’s

        0
  • Dishant Soni

    Thursday, April 28th, 2011 08:50

    13

    Thanks for such gr8 help. I’ve been trying this since long!

    0
  • Paul Santosh

    Monday, May 16th, 2011 06:37

    15

    I’ve tried this in blogger (demo:http://paulsantosh-testblog.blogspot.com/2011/05/blurry-menu.html) but, the menu is not that much blurry.

    0
    • Rochester Oliveira

      Monday, May 16th, 2011 18:19

      16

      Hi Paul,
      You have color #FFFFCA but you need color: transparent to get the result you want.
      []’s

      0
      • Paul Santosh

        Tuesday, May 17th, 2011 07:08

        17

        Ok, I’ll try it!

        0
  • William

    Friday, April 22nd, 2011 13:50

    3

    Working on IE : Just awesome !

    Thanks for this tutorial.

    PS : Download link is broken

    0
  • Fábián Gábor

    Friday, April 22nd, 2011 13:18

    4

    It’s a nice tutorial, maybe I’ll implement it on my website too. The demo page’s link is wrong, the correct one is: blurry menu demo

    0
  • Tho Tran

    Saturday, April 23rd, 2011 15:17

    5

    Thank you for sharing superb informations. Your site is very cool. I am impressed by the details that you have on this web site. It reveals how nicely you understand this subject. Bookmarked this website page, will come back for extra articles.

    0
    • rochester

      Tuesday, April 26th, 2011 19:15

      9

      Hi Tho,
      Actually we have a great team in here, Dainis, Rean, Saad, and other guys that make this work.

      I’ll be glad to see you here again!
      Thank you!
      []’s

      0
  • Kian Ann

    Monday, April 25th, 2011 16:45

    6

    Cool! Didn’t know the multiple borders thing. Really neat trick to get the bevel without nesting divs or using an image. :)

    0
    • rochester

      Tuesday, April 26th, 2011 19:19

      10

      Hey Kian,
      :before and :after can used for other applications too, but multiple borders is the best one, in my opinion.
      []’s

      0
  • Rahul Patil

    Tuesday, June 14th, 2011 09:10

    18

    Wow ! what big web page !

    0
    • Rochester Oliveira

      Thursday, July 7th, 2011 20:40

      20

      Thank you, Rahul! We’re doing our best here.

      0
  • Manc

    Wednesday, November 16th, 2011 14:51

    28

    I have a client that wants a similar style installed, it does look good I have to admit. CSS keeps surprising me. Keep it up.

    0
  • Aleksandar

    Monday, April 9th, 2012 11:50

    34

    Wonderful tutorial, i made this combined with superfish menu and it works like a charm. Thanks for tutorial!

    0
  • mickael

    Thursday, February 2nd, 2012 17:30

    32

    What a great solution, i just wonder why there is a need in #blur a of position: relative…
    it doesn’t work without it

    0
    • Rochester Oliveira

      Thursday, February 23rd, 2012 03:26

      33

      Hi mickael,

      I wrote this a while ago, but I guess it’s what helps us to keep those :before and :after elements in place.

      []’s

      0
  • MrDocForbin

    Thursday, July 7th, 2011 14:50

    19

    Great work!
    Only one problem: It doesn’t work with Opera. The Opera-Engine does not create shadows from transparent text (which, if you come to think about it, is quite logical. How can something that is transparent cast a shadow?). Since Opera (as far as I know) only supports “normal” rgb and hsla, the solution to the problem is obvious:

    #blur a {
    [...]
    color: hsla(360,100%,100%,0);
    [...]
    }

    works fine here with Firefox, Safari AND Opera. :-)

    0
    • Rochester Oliveira

      Thursday, July 7th, 2011 20:42

      21

      Nice tip MrDocForbin, I really don’t try those demos in Opera.

      []’s

      0
  • Amatoc

    Wednesday, July 27th, 2011 20:47

    22

    Great article. That’s how you use CSS the right way!

    0
    • Rochester Oliveira

      Thursday, July 28th, 2011 17:33

      23

      Hi Amatoc!

      We’re trying our best here :) thanks!

      []’s

      0
  • Derek

    Wednesday, August 10th, 2011 04:39

    24

    That’s cool! ;)

    0
    • Rochester Oliveira

      Wednesday, August 10th, 2011 22:44

      25

      Hi Derek,
      Thank you very much.
      []’s

      0
  • Aleksandar

    Monday, April 9th, 2012 11:50

    34

    Wonderful tutorial, i made this combined with superfish menu and it works like a charm. Thanks for tutorial!

    0
  • mickael

    Thursday, February 2nd, 2012 17:30

    32

    What a great solution, i just wonder why there is a need in #blur a of position: relative…
    it doesn’t work without it

    0
    • Rochester Oliveira

      Thursday, February 23rd, 2012 03:26

      33

      Hi mickael,

      I wrote this a while ago, but I guess it’s what helps us to keep those :before and :after elements in place.

      []’s

      0
  • Manc

    Wednesday, November 16th, 2011 14:51

    28

    I have a client that wants a similar style installed, it does look good I have to admit. CSS keeps surprising me. Keep it up.

    0
  • Derek

    Wednesday, August 10th, 2011 04:39

    24

    That’s cool! ;)

    0
    • Rochester Oliveira

      Wednesday, August 10th, 2011 22:44

      25

      Hi Derek,
      Thank you very much.
      []’s

      0
  • Amatoc

    Wednesday, July 27th, 2011 20:47

    22

    Great article. That’s how you use CSS the right way!

    0
    • Rochester Oliveira

      Thursday, July 28th, 2011 17:33

      23

      Hi Amatoc!

      We’re trying our best here :) thanks!

      []’s

      0
  • MrDocForbin

    Thursday, July 7th, 2011 14:50

    19

    Great work!
    Only one problem: It doesn’t work with Opera. The Opera-Engine does not create shadows from transparent text (which, if you come to think about it, is quite logical. How can something that is transparent cast a shadow?). Since Opera (as far as I know) only supports “normal” rgb and hsla, the solution to the problem is obvious:

    #blur a {
    [...]
    color: hsla(360,100%,100%,0);
    [...]
    }

    works fine here with Firefox, Safari AND Opera. :-)

    0
    • Rochester Oliveira

      Thursday, July 7th, 2011 20:42

      21

      Nice tip MrDocForbin, I really don’t try those demos in Opera.

      []’s

      0
  • Rahul Patil

    Tuesday, June 14th, 2011 09:10

    18

    Wow ! what big web page !

    0
    • Rochester Oliveira

      Thursday, July 7th, 2011 20:40

      20

      Thank you, Rahul! We’re doing our best here.

      0
  • Paul Santosh

    Monday, May 16th, 2011 06:37

    15

    I’ve tried this in blogger (demo:http://paulsantosh-testblog.blogspot.com/2011/05/blurry-menu.html) but, the menu is not that much blurry.

    0
    • Rochester Oliveira

      Monday, May 16th, 2011 18:19

      16

      Hi Paul,
      You have color #FFFFCA but you need color: transparent to get the result you want.
      []’s

      0
      • Paul Santosh

        Tuesday, May 17th, 2011 07:08

        17

        Ok, I’ll try it!

        0
  • Dishant Soni

    Thursday, April 28th, 2011 08:50

    13

    Thanks for such gr8 help. I’ve been trying this since long!

    0
  • Andy

    Wednesday, April 27th, 2011 13:01

    12

    Really great tutorial from start to finish. Just given this a go with your instructions and perfect first time, thank you! Looks brilliant too!

    0
    • Rochester Oliveira

      Thursday, April 28th, 2011 18:26

      14

      Thank you, Andy!

      You can do some tests with different colors, background.. You can do, for example, a “steamy bathroom mirror effect”, just adjusting background to white and blur to light gray :D

      []’s

      0
  • rochester

    Tuesday, April 26th, 2011 19:09

    11

    Hey iZabotin.. I just don’t know why this demo is not working, but you could use this link

    0
    • Jason

      Monday, October 17th, 2011 16:57

      26

      Great stuff, I love these types of tutorial, anything that can be CSS coded to achieve Flash style effects is always worth a read. An exciting time for CSS, the effects just keep getting better.

      0
      • Rochester Oliveira

        Tuesday, October 25th, 2011 13:45

        27

        Hey Jason,

        Agreed! CSS3 has a pretty good support, so we could use it for almost anything!

        []’s

        0
  • Kian Ann

    Monday, April 25th, 2011 16:45

    6

    Cool! Didn’t know the multiple borders thing. Really neat trick to get the bevel without nesting divs or using an image. :)

    0
    • rochester

      Tuesday, April 26th, 2011 19:19

      10

      Hey Kian,
      :before and :after can used for other applications too, but multiple borders is the best one, in my opinion.
      []’s

      0
  • Tho Tran

    Saturday, April 23rd, 2011 15:17

    5

    Thank you for sharing superb informations. Your site is very cool. I am impressed by the details that you have on this web site. It reveals how nicely you understand this subject. Bookmarked this website page, will come back for extra articles.

    0
    • rochester

      Tuesday, April 26th, 2011 19:15

      9

      Hi Tho,
      Actually we have a great team in here, Dainis, Rean, Saad, and other guys that make this work.

      I’ll be glad to see you here again!
      Thank you!
      []’s

      0
  • Fábián Gábor

    Friday, April 22nd, 2011 13:18

    4

    It’s a nice tutorial, maybe I’ll implement it on my website too. The demo page’s link is wrong, the correct one is: blurry menu demo

    0
  • William

    Friday, April 22nd, 2011 13:50

    3

    Working on IE : Just awesome !

    Thanks for this tutorial.

    PS : Download link is broken

    0
  • Alex

    Friday, April 22nd, 2011 13:16

    1

    great article, rochester! saw something similar just yesterday on css-tricks, where CSS3 animations are used to further enhance the blur effect: http://css-tricks.com/fun-with-blurred-text/
    btw: the link to your demo returns a 404 page.

    0
    • rochester

      Tuesday, April 26th, 2011 19:08

      7

      Thank you Alex!
      This is a really good article too, but my focus is in compatibility, but that “smoke” effect just blow my mind!

      0

Comments are closed.

54.82.77.50 - unknown - unknown - US