Can I create gradient line effect with css or html5?

Question

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;

Answer 1

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:

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).

Answer 2

I suggest you to use a horizontal linear gradient with border radius, something like:

border-radius:50px;
background:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);

See this jsfiddle or the snippet below for more details.

.rounded {
    height:50px;
    width:80%;
    
    border-radius:50px;
    background: -webkit-gradient(linear, 100% 0, 0 0, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
    background: -webkit-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: -moz-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

<div class="rounded"></div>

---

There is a gradient generator that i like a lot since it gives crossBrowser solution called "Ultimate CSS Gradient Generator".

Answer 3

Use rgba format

/* webkit example */
background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
)

An example: http://nicolahibbert.com/css3-alpha-transparent-gradients/

Duplicate: CSS3 Transparency + Gradient

This tool might be helpful too: http://www.colorzilla.com/gradient-editor/

Answer 4

As you said "from transparent towards solid", this should be what you want:

HTML

<div class="container">
<div class="gradient">
</div>
</div>

CSS

div.container {
    width: 500px;
    height: 30px;
    /*background-color: #791;*/ /*uncomment this property to see the transparency effect*/
    padding: 10px;
}
div.gradient {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,1)); /* use vendor specific property if the standard one does not work */
    border-radius: 25px;
}

Answer 5

You can do this with CSS3, and if you want it to look just like the image you provided, you can use some transparency and border-radius. I always found this link helpful: