If you’ve been used Twitter, you might already saw their user blue input glow effect when the box is focused wich is also smoothly animated by using the transition property. In this tutorial I’m gonna show you how to achieve the same effect using box-shadow properities.

Ok, so here we go:

input {
    transition: all 0.30s ease-in-out;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    outline:none;
}

By using the transition property we are telling to make a transition animation to any changes made on the input.
Also we are using the outline property to cancel the default highlight border from Safari and Chrome browsers.

Ok, now that we’ve set up our playground, we can actually create the glow effect using box-shadow property, but it’s not gonna look like a shadow, because we will use a bright blue color.
We will also add RGBA so we can control the transparency level.

The code will look like:

input:focus {
	border:#35a5e5 1px solid;
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

And if you want to make round coners around the input form, you can easly do it by using border-radius property.
Here is my final result:

And there you have the entire code:

input {
	transition: all 0.30s ease-in-out;
	-webkit-transition: all 0.30s ease-in-out;
 	-moz-transition: all 0.30s ease-in-out;
 	border:#999 1px solid;
 	outline:none;
}
 
input:focus {
	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}