Как сделать точный CSS3 линейный градиент, как на картинке?

Question

Например, это градиент, который я хочу сделать в CSS3

Я могу использовать обрезку изображения 1 px и повторить по оси x, как мы делали раньше Но теперь, если я хочу сделать такой же точный градиент, используя CSS3.

Я знаю много бесплатных CSS3 Gradient Generator, Maker, доступных в Интернете. У меня вопрос, какой генератор наиболее предпочтителен и как с этим сделать необходимые градиенты.

Редактировать после ответа Алекса: больше градиентов

Answer 1

Ultimate CSS Gradient Generator - мой предпочтительный выбор.

background: #CCCCCC; 
background: -moz-linear-gradient(top, #CCCCCC 0%, #343434 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CCCCCC), color-stop(100%,#343434));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CCCCCC', endColorstr='#343434',GradientType=0 );

Сделать вышеуказанный градиент довольно просто.Вы можете видеть, что он имеет один цвет сверху и шагает к следующему снизу.Просто скопируйте верхний и нижний цвета и поместите их в соответствующие входы генератора.

Answer 2

Я рекомендую четыре генератора градиента CSS3 для этой работы. Есть и другие генераторы, но они не так хороши.

1. Генератор градиента на glrzad.com
2. Генератор предельных градиентов на домашней странице colorzilla
3. Генератор градиента размещен в Microsoft
4. gradientoo .

Из всех этих градиентов, кажется, самый удобный и простой в использовании. Это дает вам линейные, радиальные и эллиптические градиенты CSS3 (все кросс-браузер). Он также доступен в качестве дополнения для Firefox. Один из этих генераторов будет выполнять вашу работу (это мое личное мнение, вы можете отличаться от него; я должен также упомянуть, что Gradientoo разработан мой я)

Answer 3

Линейный градиент должен работать нормально:

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#343434));
background: -moz-linear-gradient(top,  #ccc,  #343434);