In the previous article CSS3 Gradient technique about CSS3 gradient, we learned the basic of gradient techniques in css. In this article we will continue and learn more about CSS3 gradient and specially, CSS3 radial gradient. If you have came directly to this part of the tutorial, we recommend you to take a look at the first part of the article, than refer to this part.

Multi Color Gradient

let’s continue with multi color gradient. It’s pretty simple, after second and third argument for linear-gradient function, add as many color as you want. Here an example

[codepen_embed height=”266″ theme_id=”0″ slug_hash=”jqxBYv” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/jqxBYv/’>practicing multi color gradient</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

If you use rgba color, you can specify the opacity as well. for instance

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

Yep, it was all about the basic of linear gradient. now let’s learn radial gradient.

How to Use CSS3 Radial Gradient?

CSS3 radial gradient is like a circle. It start from the center and ends to borders. You can think of center as 0% point, and the border as 100% point.

css3 radial gradient

The first parameter for the radial-gradient function is the shape. the default is ellipse, you can write circle instead. Here is the basic example.

.gradient {
  background-image:
    radial-gradient(
      circle,
      red,
      blue
    );
}

As like linear-gradient, you can add more arguments and more colors.

[codepen_embed height=”266″ theme_id=”0″ slug_hash=”pyVeQG” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/pyVeQG/’>practicing radial gradient</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Specify the Size

In the above example, the circle of the gradient is out the 300px box. You can give the size value to make it fit on the container. We have different size values. Here are the list.

• closest-side
• farthest-side
• closest-corner
• farthest-corner

You can write them list this

  background: radial-gradient(circle closest-side, red, blue, green); 

Lastly, if you want  to use CSS3 gradient in production projects, make sure you write the prefixes. Here an example for all major browser support.

.technig-gradient {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
}

Conclusion

There are a lot to learn about CSS3 gradients, you can search on w3schools for more arguments support. We hope it has been helpful for you. If you have any types of questions related to CSS3 feel free to comment it bellow. 🙂

The post Understanding CSS3 Radial Gradient – Part 2 appeared first on TECHNIG.

Understanding CSS3 gradient will make you a pro web designer. CSS3 gradients let you display smooth transitions between two or more specified colors. In this step by step tutorial about CSS3 gradient technique , you learn from the basic to advance of CSS3 gradient. It’s the new feature of CSS3. Previously, we used to use images to display different color. Using Gradient instead of image can reduce download time of your web site.

Browser Supprt

Mainly, we have two types of gradient, linear gradient and radial gradient. The CSS3 gradient technique article is in two part, and you will learn both gradient types. The browser support pretty good, but you must use -webkit-, -moz-, or -o-  prefix to make it work on major version of browsers.

CSS3 Linear Gradient function

The CSS linear-gradient() function creates an <image> which represents a linear gradient of colors.  Basically, you can give two color to this function, one for starting point and the second for end point. If you want to customize it more, you can define the direction as first argument as well. Here is an example.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”NNYdzv” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/NNYdzv/’>Practicing css3 linear gradient</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

As you can see in the above example, we have given three value with two color. Of course you can give rgb or hex color value as well. In real world, you would do something like this

.gradient-technig {
  height: 100px;
  background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(to left,red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(to left,red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(to left,red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left,red, yellow); /* Standard syntax */
}

Now, this is an standard way of using gradient which every major browsers will support.

CSS3 Gradient Technique Example

Let’s apply what we have learn in a real world example. For this example, we are going to apply it on a picture.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”KzoaYR” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/KzoaYR/’>Css3 Gradient Example</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

As you can see the example, the smooth red color above the picture is gradient. If you want see the code, click on css tab and see that it is really and command  example to use. The second color or the end point color is rgba (red,green,blue,alpha). The last value for rgba is opacity which is equal to zero. I means the second color is not visible and I have just put random numbers.

Conclusion

So, It was the part one of CSS gradient technique. In part 2, we will show you have use use radial gradient in CSS3. We hope it has been informative for you. If you have any question, feel free to comment it below. 🙂

The post Understanding Linear and Radial CSS3 Gradient – Part 1 appeared first on TECHNIG.