Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • What is css gradients ?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 278
    Comment on it

    Hello All,

    Earlier, we have used image for gradients effect but now we will use gradient using css3 and we will see how to use many colors in gradient and only one color in gradient.

    Gradients are declared by background-color but according to short-hand css method we can sue background.


    background: linear-gradient(direction, color-stop1, color-stop2, ...);

    Gradient are two type -

    1) Linear Gradients - in this, define color goes down, up ,left ,right an diagonally.

    2) Radial Gradients - in this, goes defined by their center.

    An example with output -

    Note :- we need to use prefix for rendering in some versions

    background: red; /* For browsers that do not support gradients */
      background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */
      background: linear-gradient(-90deg, red, yellow); /* Standard syntax */

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: