Do you want to be a good Web Developer?

Enter Your Email To Get Our Exclusive Tutorials Right In Your Email

CSS3 Gradients

CSS3 Gradients

With CSS3 Gradients you can add two or more colors in an element.This gives a smooth transition of elements.


There are two types of CSS3 Gradients

  • linear-gradient(blue,black)
  • radial-gradient(yellow,blue)


  • linear-gradient

    It is used to spread two or more colors from top to bottom,or left to right

    Syntax

    background:linear-gradient(blue,black);
    

    To spread the colors in different direction


    background:linear-gradient(to bottom,blue,black);
    

    Or in particular corner


    background:linear-gradient(to bottom left,blue,black);
    

    Or use angles


    background:linear-gradient(30deg,blue,black);
    

    For cross browser support


    background: -webkit-linear-gradient(blue,black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(blue,black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(blue,black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(blue,black); /* Standard syntax */




    radial-gradient

    A radial gradient is defined by its center.It starts with one color starting from a central point and fading to another color.


    Syntax

    background:radial-gradient(blue,black);
    

    To give the shape of the fade


    background:radial-gradient(circle,blue,black);
    

    You can also specify if the gradient is contained by the sides or corners of the box nearest to or furthest away from the origin by using "closest-side", "closest-corner", "farthest-side" and "farthest-corner"


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

    You can also set specific place of origin of the gradient


    background: radial-gradient(at top left, blue, black);
    




    Repeating Gradients

    You can also use "repeating-linear-gradient" and "repeating-radial-gradient" to repeat the gradients.


    background: repeating-linear-gradient(white, black 10px, white 20px);
    
    PrevNext

    Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email