Search code examples
htmlcssunderline

Underline that peters out via CSS/JS?

Is it at all possible to achive this effect, only using CSS/JS?

https://i.sstatic.net/0PfZE.jpg

I'm just wondering as to whether or not this is feasible without images, and any answers would be appreciated.

Thanks in advance.

Solution

  • "Peters out"?? You mean the 2 lines (top and bottom) that fade out to the right and left - yes. If you make a div of a whatever width and height of maybe 1px (or 2) you can apply a css gradient to it (with transparency) and it would work fine. You would have to accept some limitations in the IE world though. You can use the http://www.colorzilla.com/gradient-editor/ to design the gradient.