All TalkersCode Topics

Follow TalkersCode On Social Media - 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



    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


    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 */


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



    To give the shape of the fade


    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 ❯