✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

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 ❯