CSS fade out horizontal rule / line styled div effect without images

Question

I\'m a big fan of minimal use of images and was wondering if anyone had a tactic (or if it\'s possible) to create this kind of thing with pure static CSS?

http://ww

Answer 1

You can use CSS3's stops and the :after pseudo-element to achieve such an effect. The trick is to add a border to the

---

element by using the :after pseudo-element and position it in the center of the initial gradient with a soft color that ends with the gradient.

Here is a quick demo, and another demo using some color.