Working with css3 gradients and understanding how they work

It was nice being able to use gradients in my designs when starting a new projects. It gave me the ability to make elements appear in a greater style. It were even nicer when I were able to use css3 gradients with no image to get the same result. In today’s post I will showing you all how you can use css3 gradients and how it can make your life that much easier and maybe speed up your development process.

From Photoshop to css3

When making the transition from using photoshop gradient images many of you probably think that css3 is way to complicated and have not yet used its incredible features. When working with css3 gradients you will find how photoshop now goes hand and hand with css3.

Linear Gradients

Linear gradients are gradients that is usually vertical or horizontal. In Photoshop designers in most cases use 2 colors but sometime you will want to use more then 2 colors at a time and just how that can be achieved using Photoshop it can also be achieved using css3. Take a look at the code below.

background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 53%, #05abe0 100%); /* FireFox 3.6+ */

Now Lets break the code down so you can better understand what is what and what is going on.
Moz linear gradient targets Mozilla Firefox

-moz-linear-gradient

Top lets the css3 know that the gradient is starting from the top

top

The first color if you can see the image, is from photoshop gradient tool.
CSS3 Gradient

#87e0fd 0%

The second color:
CSS3 Gradient

#53cbf1 53%

The third color:
CSS3 Gradient

#05abe0 100%

Targeting other browsers

So you have created your css3 gradient and you noticed that it only shows in Firefox. Why? The reason why comes to the simple fact we have not targeted other browsers in our stylesheet. How do you target other browsers with css3? Look below.

Chrome, Safari4+

-webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(53%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */

Opera11.10+

-o-linear-gradient(top, #87e0fd 0%,#53cbf1 53%,#05abe0 100%); /* Opera11.10+ */

Internet Explorer10

-ms-linear-gradient(top, #87e0fd 0%,#53cbf1 53%,#05abe0 100%); /* IE10+ */

My “good” buddies Internet Explorer 6 (IE6), Internet Explorer 7 (IE7), Internet Explorer 8 (IE8), Internet Explorer 9 (IE9)

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */

Optional: For W3C Purposes if you’re into validations of your website.

background: linear-gradient(top, #87e0fd 0%,#53cbf1 53%,#05abe0 100%); /* W3C */

Razvan Sava the author

Razvan is the founder of Webdevtuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts
    • Yeah generators are great but its good to know how to write it and it all seems hard but really ps does all the works and gives you all the numbers.

Leave a Reply