Градиент на CSS3

#css3 #css

Здравствуйте, подскажите, пожалуйста, как сделать такой градиент на CSS3, без картинок.
С помощью каких сервисов?
    

Ответы

Ответ 1

* {
  padding: 0;
  margin: 0;
}
div {
  min-height: 100px;
  background: #f5f8f9;
  /* Old browsers */
  background: -moz-linear-gradient(left, #f5f8f9 0%, #1d97d3 50%, #0591d5 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #f5f8f9),
color-stop(50%, #1d97d3), color-stop(100%, #0591d5));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #f5f8f9 0%, #1d97d3 50%, #0591d5 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #f5f8f9 0%, #1d97d3 50%, #0591d5 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #f5f8f9 0%, #1d97d3 50%, #0591d5 100%);
  /* IE10+ */
  background: linear-gradient(to right, #f5f8f9 0%, #1d97d3 50%, #0591d5 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f5f8f9', endColorstr='#0591d5',
GradientType=1);
  /* IE6-9 */
}





http://jsfiddle.net/6bv5hmrz/

http://www.colorzilla.com/gradient-editor/
вот есть такой сервис


Ответ 2

Да ну нет же! Не с помощью сервисов, а с помощью background-image:
#gradient {
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent:
100%) {
    background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent),
color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+
    background-image:  linear-gradient(to right, @start-color @start-percent, @end-color
@end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d',
GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
}
}

извините за less, упрощаю себе жизнь немного :)