Home » Tutorials » HTML & CSS » CSS3 – Glow Effects Without Photoshop

CSS3 – Glow Effects Without Photoshop

CSS3 – Glow Effects Without Photoshop

  • Stumble it!
  • Share

Last few weeks, we have learnt how to create gradient rounded corner button purely in CSS. I’m sure you are enjoying it right? Today, we are going to create a HTML element with glow effects purely in CSS! This tutorial is pretty simple and straightforward, hope you guys enjoy it.

Tutorial Details

  • Difficulty: Beginner
  • Technology: HTML4+, CSS3
  • Supported Browser: Firefox 4.0+, Chrome 5+, Safari 4+

Demo

My box with glow

1. HTML

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 - Glow Effects Without Photoshop</title>
</head>

<body>
<a class="box">My box with glow</a>
</body>
</html>

Create a new html page according to the structure above. Insert a class called “box” to <a> tag.

2. CSS

body {
	background: #000;	
}

.box {
    background: #1c1c1c;
	color: #0099ff;
	display: block;
	margin: 30px;
	padding: 20px;
	text-align: center;
	width: 150px;
	-moz-box-shadow: 0px 0px 15px #0099ff;
  	-webkit-box-shadow: 0px 0px 15px #0099ff;
  	box-shadow: 0px 0px 15px #0099ff;
}

Use the CSS3 property called “box-shadow” which we learnt in past tutorial to create the outer-glow effects for your element. The explanation of the property:

-moz-box-shadow: [position-x] [position-y] [blur-radius] [color];
-webkit-box-shadow: [position-x] [position-y] [blur-radius] [color];
box-shadow: [position-x] [position-y] [blur-radius] [color];

In this case, we want the glow effect appear in the middle of our button, so we set the x, y position of the shadow to 0, and we want the glow with 15px blur in light blue. That’s it!

Note:
-moz-box-shadow is specifically for gecko browser(Firefox), -webkit-box-shadow is for webkit browser(Safari, Chrome) and box-shadow is for coming modern browser such as IE9.

What’s next?

Wow! It’s pretty simple right? Now you are able to create a HTML element with glow effects in CSS. In next lesson, we will focus on animate glow effect of our HTML Element. Check out all the other great tutorial in onlyWebPro.com to dive into modern web development!

Related Articles


  • Create Facebook App Style Slide-Out Navigation
  • Build Intelligent Layout Using CSS Calc() Property
  • Design Your Own Responsive Web Template

  • L3LIS

    How can I make it work on IE8?

    • http://www.onlywebpro.com onlyWebPro

      Hi L3LIS,

      I’m sorry to say that, IE8 was unable to support box-shadow property. There is only IE 9 and 10 is supporting CSS3 box-shadow.

    • Ghj

      rest

  • Benjijuhn

    not working for me on safari or chrome.

    • http://www.onlywebpro.com onlyWebPro

      Hi Benjijuhn,

      It’s working on my Chrome & Safari. Ma I know what version of browser are you using now? Or do you mind to paste your full code here? So other professionals can help tp solve your problem :)

      • hacker

        hahaha amen lol

Android, iOS Development Tutorials