How to create a glow with CSS3

Creating a glow in CSS3 can be perfectly realized by means of the CSS3 box-shadow property. Originally the CSS3 box-shadow property wasn’t designed to create a glow but by inserting specific values in a clever way a stunning glow can still be realized. Initially a box-shadow needs to be created to which a right side and left side shadow needs to be added. Next the horizontal and vertical offsets require a 0 value and the blur radius needs to be increased. Last but not least a white box-shadow colour is required to realize a stunning glow around your box. Please find below an example of how this property is applied in practice:

CSS3 for shadow:

.paragraph{
box-shadow: 5px 5px 10px #000;
-webkit-box-shadow: 5px 5px 10px #000;
-moz-box-shadow: 5px 5px 10px #000;
}
CSS3 for glow:

.paragraph{
box-shadow: 0px 0px 10px #fff;
-webkit-box-shadow: 0px 0px 10px #fff;
-moz-box-shadow: 0px 0px 10px #fff;
}


Was this useful?