CSS3 Forms with gradient and box-shadow properties

One of the neat additions to CSS3 is the ability to create wonderful css3 box-shadows and gradients without having to utilize any images. This is a great enhancement since it creates a faster load time and less server hits making the user experience to the user more pleasant. Please note the Gradient and box shadow techniques shown in this article are not supported by IE8 or older.

Gradient Effect

Notice the difference in the one input field with the gradient effect from the one without one.

Code:

#gradient {
  background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #ccc), color-stop(100%, #fff));
  background: -moz-linear-gradient(top, #ccc, #fff);
}

Explanation:

Supported by FF3.6+, Safari 2+ and Google Chrome gradients are now a great tool to use to bring out your site presentation. Same applies for the gradient property in this case. You use -webkit-gradient for Safari and -moz-linear-gradient for Firefox.

Box Shadow Effect

Hover over the input field, and you have your css3 box shadow affect.

Code:

#css3boxshawdow {
  width: 200px;
}
#css3boxshawdow:hover {
  box-shadow: 0px 1px 8px #F48004;
  -webkit-box-shadow: 0px 1px 8px #F48004;
  -moz-box-shadow: 0px 1px 8px #F48004;
}

Explanation:

The box-shadow property is supported in IE9+, Firefox 4, Chrome, and Opera. For support for Safari at the moment use property -webkit-box-shadow:. For support for Firefox at the moment use property -moz-box-shadow:.

Full CSS

input.css3form,  textarea.css3form  {
  background-color: #eee;
  background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #fff), color-stop(100%, #efefef));
  background: -moz-linear-gradient(top, #fff, #efefef);
  border-radius: 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
  border: solid 1px #efefef;
  padding: 3px 8px ;
  text-shadow: 0px 1px 1px white;
  display: block;
  margin: 9px;
}
input.css3form:focus, textarea.css3form:focus {
  box-shadow: 0px 1px 8px #F48004;
  -webkit-box-shadow: 0px 1px 8px #F48004;
  -moz-box-shadow: 0px 1px 8px #F48004;
}
input.roundbutton {
  background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #fff), color-stop(100%, #efefef));
  background: -moz-linear-gradient(top, #fff, #efefef);
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
  border: solid 2px white;
  padding: 10px 18px;
  cursor: pointer;
  margin: 8px;
}
input.roundbutton:hover {
  background: -webkit-gradient(linear, center top, center bottom, color-stop(100%, #eee), color-stop(0%, #ccc));
  background: -moz-linear-gradient(top, #ccc, #eee);
  box-shadow: 0px 1px 8px #F48004;
  -webkit-box-shadow: 0px 1px 8px #F48004;
  -moz-box-shadow: 0px 1px 8px #F48004;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border: solid 2px white;
  padding: 10px 18px;
  cursor: pointer;
  margin: 8px;
}
label.css3formlabels {
  margin-left: 8px;
}
#css3boxshawdow {
  width: 200px;
  padding: 2px 6px;
}
#css3boxshawdow:hover {
  box-shadow: 0px 1px 8px #F48004;
  -webkit-box-shadow: 0px 1px 8px #F48004;
  -moz-box-shadow: 0px 1px 8px #F48004;
  padding: 2px 6px;
}
#gradient {
  background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #ccc), color-stop(100%, #efefef));
  background: -moz-linear-gradient(top, #ccc, #efefef);
  margin: 10px 0px;
  display: block;
  padding: 1px 3px;
}
#nogradient {
  margin: 10px 0px;
  display: block;
  padding: 1px 3px;
}

Final Result

Below is the techniques we just displayed above all together in one form to display how nicely your forms can be enhanced.