Using Gradient in HTML using simple CSS

In this post I show(after some googling) how to use gradients(color transitions) in your html using simple CSS.
I am putting the CSS code below.
This code can be pasted in the css file of your project.
you have to create a div with id as “gradient”.
Alternatively, you can paste this code in style compoenet of any element where you want the gradient effect.

the code is:

/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#ff9900));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #000, #ff9900);
/* For Internet Explorer 5.5 – 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000, endColorstr=#ff9900);
/* For Internet Explorer 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)”;

I am showing the preview of the effect which I got.
**** One can change the colors by looking at the code above !!****

7 responses to “Using Gradient in HTML using simple CSS

  1. Hmm it appears like your website ate my first comment (it was
    super long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog.
    I too am an aspiring blog writer but I’m still new to the whole thing. Do you have any suggestions for beginner blog writers? I’d definitely appreciate it.

  2. Howdy would you mind stating which blog platform you’re working with? I’m going to
    start my own blog soon but I’m having a tough time selecting between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design and style seems different then most blogs and I’m looking for something unique.
    P.S Apologies for being off-topic but I had to ask!

    • Hey,
      Sorry for the late reply.
      I work on wordpress.
      The design is actually not mine and I think themes are generally available on all the platforms so I think that should not be an issue.

      Apologies again for the delayed reply.

  3. It’s a shame you don’t have a donate button! I’d without a doubt donate to this superb blog! I guess for now i’ll settle for bookmarking and adding your
    RSS feed to my Google account. I look forward
    to brand new updates and will talk about this site with my Facebook group.
    Talk soon!

  4. Your style is so unique compared to other folks I
    have read stuff from. I appreciate you for posting when you’ve got the opportunity, Guess I will just bookmark
    this blog.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s