CODEWITHSUNDEEP
css
user481610
user481610

Reputation: 3270

css multiple gradients with colour stops

I have created a simple css bar with colour stops using the following:

#testing{
  width:100%;
  height:40px;
   background-image: -webkit-linear-gradient(left, #034a96 80%, #eab92d 50%);  
    background-image: -moz-linear-gradient(top, #034a96 50%, #eab92d 51%);  
    background-image: -ms-linear-gradient(top, #034a96 50%, #eab92d 51%);  
    background-image: -o-linear-gradient(top, #034a96 50%, #eab92d 51%);  
    background-image: linear-gradient(top, #034a96 50%, #eab92d 51%); 
      -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
          border-radius: 15px;
}

What I would like to do is have the first 80% of the bar is have a gradient that goes from the top with colour #034a96 to #0663c7 and then just that gradient colouring 50% of the bar. Then with the other 51% I have another gradient from the top with #eab92d to #c79810. What I'm asking is if it is possible to have multiple gradients with in each other eg:

background-image: -webkit-linear-gradient(left,  top #034a96 to #0663c7  50%, top #eab92d to #c79810 51%);

Or something along those lines. I hope I'm being clear with everything. Thanks in advance

Upvotes: 0

Views: 4152

Answers (1)

Mark
Mark

Reputation: 6071

Yes, you can. One simple example (not exactly your colourset, but it shows the plan):

background: #b8e1fc; /* Old browsers */
background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */

This code doesn't create multi-step gradients in IE. Up to IE9, these aren't possible at all (only simple gradients), but IE9 supports SVG data. It's a bit complicated to write, but you should have a look at http://www.colorzilla.com/gradient-editor. It's an online-tool for creating CSS code for gradients. It also supports SVG gradients for IE9.

Upvotes: 1

Related Questions