Archive for tag: CSS3

CSS3 multiple gradient background in div

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.