Good afternoon,
Today, I was working on some of the design with
HTML5 and CSS3, and I had to deal
with gradient. The situation was that I had to do two gradients
without using background image, so I have looked into W3C standard
and found out that we can have two, not two but as many gradients
we wanted, it wasn't complicated but it was quite useful.
I have setup that into normal div and placed gradient as
following:
Below is HTML div with id="db" and I are going to place gradient
into it.
<div id="db"></div>
Now, do some CSS3 code which would generate multiple gradients
inside div tag as following:
#db {
/* IE6-9/Chrome < 10 */
background-color: #E0DFDE;
/* IE10 */
background-image: -ms-linear-gradient(left top, #E0DFDE 15%, #3D668F 50%, #E0DFDE 85%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left top, #E0DFDE 15%, #3D668F 50%, #E0DFDE 85%);
/* Opera */
background-image: -o-linear-gradient(left top, #E0DFDE 15%, #3D668F 50%, #E0DFDE 85%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.15, #E0DFDE), color-stop(0.45, #3D668F), color-stop(0.85, #E0DFDE));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left top, #E0DFDE 15%, #3D668F 50%, #E0DFDE 85%);
/* Proposed W3C Markup */
background-image: linear-gradient(left top, #E0DFDE 15%, #3D668F 50%, #E0DFDE 85%);
height: 300px;
width: 300px;
}
The reson behind I have wrote this codes because all the
browsers dones't support the way W3C markup works because it is
just proposed mark-up they haven't started implemeted it yet and
because of that we have to add for all the browsers and also we can
do something for non-supported CSS3 browsers like IE6-9, Chrome
before 10, should write background-color, above I have #E0DFDE
color in case of non-supported browser it will not fall apart. this
example only works for supported browsers.
Result of above example is as following:

If you think that helped you please don't forget to rate and
share via Facebook, Twitter, LinkedIn, etc.
Enjoy your day and have nice easter weekends.