0

I'm trying to get gradient in DIV using the CSS3 like on the image:

enter image description here

Using:

.bar-header {
    background: linear-gradient(to bottom top, yellow , blue) !important;
}

But without luck, what is the right syntax to get result like on the image above?

Thanks for any advice.

llanato
  • 2,508
  • 6
  • 37
  • 59
redrom
  • 11,502
  • 31
  • 157
  • 264

2 Answers2

2

A bit longer code could provide better cross-browser support. Note that not all of these are needed. I've also added a border on the top, not quite sure if you need it.

.bar-header {
  background: #409be8; /* Old browsers */
  background: -moz-linear-gradient(top,  #409be8 0%, #4883e6 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#409be8), color-stop(100%,#4883e6)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #409be8 0%,#4883e6 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #409be8 0%,#4883e6 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #409be8 0%,#4883e6 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #409be8 0%,#4883e6 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#409be8', endColorstr='#4883e6',GradientType=0 ); /* IE6-9 */
  
  border-top: 2px solid #545de4; /* Border displayed above */
  width: 808px; /* For the demo, to make it visible */
  height: 100px; /* For the demo, to make it visible */
}
<div class="bar-header"></div>
Winfried
  • 9,243
  • 4
  • 26
  • 24
  • 1
    [Lots of unnecessary prefixes](http://caniuse.com/#search=linear-gradient). – Weafs.py Jan 25 '15 at 18:03
  • 1
    You copied this code exactly from http://www.colorzilla.com/gradient-editor/. Why didn't you link to it to let the user make a similar thing themselves? – James Donnelly Jan 26 '15 at 15:16
  • @chipChocolate.py Yeah, I never understood where -ms-LG came from. IE10 was the first to support it, and it came with the non-prefixed one at the same time. – Katana314 Jan 26 '15 at 15:16
0

Use some add-on like Color Picker/ColorZilla and etc to get colors on top/middle/bottom of the image and use this data in some "CSS Gradient Generator". To find any of these programms use Google search.

Amberta
  • 123
  • 1
  • 5