Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via 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



    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);

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

    Are You Starting A New Blog
    Do You Want Best Web Hosting?

    Try World's Best Web Hosting Provider BlueHost
    At Just $3.95/mo

    Hurry Up! Limited Time Offer

    Yes, I Want To Check Out BlueHost

    Check The World's Best SEO And All-In-One Marketing Toolkit
    For Digital Marketing Professionals SEMRUSH

    Check Out SEMRUSH