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:

CSS3-multiple-gradient-as-background

 

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.

4 comments on “CSS3 multiple gradient background in div”

  1. Gravatar of replica watches  replica watches
    Posted Tuesday, December 4, 2012 at 7:28:49 AM

    The reson behind I have wrote this codes because all the browsers dones't support the way W3C markup works.

  2. Gravatar of replica watches uk  replica watches uk
    Posted Monday, January 7, 2013 at 11:33:42 PM

    Aw, this was a really good post. Taking a few minutes and actual effort to create a really good article... but what can I say... I hesitate a whole lot and don't manage to get nearly anything done.

  3. Gravatar of fsdfdsa4545  fsdfdsa4545
    Posted Wednesday, March 13, 2013 at 2:58:12 AM

    <a href="http://www.igfdsgfdsgfdse.com/">fdgfsdfggfdsgatches</a>
    [url=http://www.gfdsgdsgdfg.com/]gfdsgfdgfdsica[/url]
    http://www.igfdsgfdgdfafchestore.com/

  4. Gravatar of sexy swimwear  sexy swimwear
    Posted Thursday, June 13, 2013 at 11:50:29 PM

    Aw, this was a really good post.

Post a comment