CSS | Gradients

CSS is the mechanism to adding style in the various web documents. One of the important features of CSS includes Gradients. Gradients allows to display smooth transitions between two or more colors.

There are two types of Gradients.

Linear Gradients: It includes the smooth color transitions to going up, down, left, right and diagonally. The minimum two color required to create a linear gradient. More then two color elements can be possible in linear gradients. The starting point and the direction is needed for the gradient effect.

Syntax:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
  • Top to Bottom: In this image, the transition started to white color and ended with green color. On exchanging the color sequence, the transition will start with green and will end with white.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS Gradients</title>
            <style>
                #main {
                    height: 200px;
                    background-color: white;
                    background-image: linear-gradient(white, green); 
                }
                .gfg {
                    text-align:center;
                    font-size:40px;
                    font-weight:bold;
                    padding-top:80px;
                }
                .geeks {
                    font-size:17px;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <div id="main">
                <div class = "gfg">GeeksforGeeks</div>
                <div class = "geeks">A computer science portal for geeks</div>
            </div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • Left to Right: In this image, the transition started from left to right. It starts from white transitioning to green.
    Example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS Gradients</title>
            <style>
                #main {
                    height: 200px;
                    background-color: white;
                    background-image: linear-gradient(to right, white, green); 
                    }
                .gfg {
                    text-align:center;
                    font-size:40px;
                    font-weight:bold;
                    padding-top:80px;
                }
                .geeks {
                    font-size:17px;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <div id="main">
                <div class = "gfg">GeeksforGeeks</div>
                <div class = "geeks">A computer science portal for geeks</div>
            </div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • Diagonal: This transition started from top-left to bottom-right. It starts with green transition to white. For the diagonal gradient, need to specify both horizontal and vertical starting positions.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS Gradients</title>
            <style>
                #main {
                    height: 200px;
                    background-color: white; 
                    background-image: linear-gradient(to bottom right,
                                    green, rgba(183, 223, 182, 0.4)); 
                }
                .gfg {
                    text-align:center;
                    font-size:40px;
                    font-weight:bold;
                    padding-top:80px;
                }
                .geeks {
                    font-size:17px;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <div id="main">
                <div class = "gfg">GeeksforGeeks</div>
                <div class = "geeks">A computer science portal for geeks</div>
            </div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • Repeating Linear Gradient: CSS allows the user to implement multiple linear gradients using a single function repeating-linear-gradient(). The image here contains 3 colors in each transition with some percentage value.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS Gradients</title>
            <style>
                #main {
                    height: 200px;
                    background-color: white; 
                    background-image: repeating-linear-gradient(#090,
                                             #fff 10%, #2a4f32 20%);
                }
                .gfg {
                    text-align:center;
                    font-size:40px;
                    font-weight:bold;
                    padding-top:80px;
                }
                .geeks {
                    font-size:17px;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <div id="main">
                <div class = "gfg">GeeksforGeeks</div>
                <div class = "geeks">A computer science portal for geeks</div>
            </div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • Angles on Linear Gradients: CSS allows the user to implement directions in Linear Gradients rather than restricting themselves to predefined directions.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS Gradients</title>
            <style>
                #main {
                    height: 200px;
                    background-color: white; 
                    background-image: repeating-linear-gradient(-45deg,
                                                    #090, #2a4f32 10%);
                }
                .gfg {
                    text-align:center;
                    font-size:40px;
                    font-weight:bold;
                    padding-top:80px;
                }
                .geeks {
                    font-size:17px;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <div id="main">
                <div class = "gfg">GeeksforGeeks</div>
                <div class = "geeks">A computer science portal for geeks</div>
            </div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:

CSS Radial Gradients: A radial gradient differs from a linear gradient. It starts at a single point and emanates outward. By default, the first color starts at the center position of the element and then fade to the end color towards the edge of the element. Fade happens at an equal rate until specified.
Syntax:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
  • Radial Gradient- evenly spaced color stops: In CSS, by default, the fade happens at an equal rate. The following figure shows the Radial Gradient with even color stops.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS Gradients</title>
            <style>
                #main {
                    height: 350px;
                    width: 700px;
                    background-color: white;
                    background-image: radial-gradient(#090, #fff, #2a4f32);
                }
                .gfg {
                    text-align:center;
                    font-size:40px;
                    font-weight:bold;
                    padding-top:80px;
                }
                .geeks {
                    font-size:17px;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <div id="main">
                <div class = "gfg">GeeksforGeeks</div>
                <div class = "geeks">A computer science portal for geeks</div>
            </div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • Radial Gradient- unevenly spaced color stops: CSS allows the user to have variation in spacing of color stops while applying radial gradient feature.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <title>CSS Gradients</title>
            <style>
                #main {
                    height: 350px;
                    width: 100%;
                    background-color: white;
                    background-image: radial-gradient(#090 40%, #fff, #2a4f32);
                }
                .gfg {
                    text-align:center;
                    font-size:40px;
                    font-weight:bold;
                    padding-top:80px;
                }
                .geeks {
                    font-size:17px;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <div id="main">
                <div class = "gfg">GeeksforGeeks</div>
                <div class = "geeks">A computer science portal for geeks</div>
            </div>
        </body>
    </html>                    

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

BTech Computer Science student at IIIT Vadodara

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.