CSS HTML仅灰色矩形，颜色褪色

Question

我试图用CSS创建以下GRAY（真的想要这些灰色阴影）图像。仅限HTML：

您可以看到底部的grep颜色更强，顶部和中部的颜色更淡。

以下是图片的链接： http://www.content.dating/online-dating/dating-website/navigation-background.png

这是我尝试过的小提琴：

http://jsfiddle.net/m0hbty67/3/

目前颜色是错误的，淡入淡出的方向是错误的 - 仍在尝试。

任何帮助将不胜感激。

三江源

基本代码：

<div id="navBackGround"></div>

#navBackGround {
    background-color: grey;
    width: 160px;
    height: 690px;

    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;

    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}

Answer 1

DEMO

background: rgb(243,243,244); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(243,243,244,1) 0%, rgba(213,214,215,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,243,244,1)), color-stop(100%,rgba(213,214,215,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(243,243,244,1) 0%,rgba(213,214,215,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(243,243,244,1) 0%,rgba(213,214,215,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(243,243,244,1) 0%,rgba(213,214,215,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(243,243,244,1) 0%,rgba(213,214,215,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f4', endColorstr='#d5d6d7',GradientType=0 ); /* IE6-9 */