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 And Get Our Latest Tutorials Updates Via Email