Can I create gradient line effect with css or html5?


I don't want to use an image for this. I want to create a line which from transparent towards solid with css. Can I? with css3 or html5 as like this;

enter image description here


Answers:


Like this: http://codepen.io/richbradshaw/pen/uexaG

.blurred-line {
  height:30px;
  width:600px;
  margin:0 auto;

  -moz-background-image: linear-gradient(to right, transparent 0%, black 100%);
  background-image: linear-gradient(to right, transparent 0%, black 100%);

  border-radius:15px;
  -webkit-filter:blur(1px);
}

Which renders like:

enter image description here

Despite what most people seem to think, that gradient syntax is the real syntax, and works in Firefox 10+, Chrome 26+, IE10+ and Safari 6 (or 7?)+.

Including all the ancient gradient stuff is a waste of time, unless you are planning to support browsers that don't exist (e.g. Chrome 10, Firefox 3.6).