CSS Advance Gradients

    In this advanced series of CSS tutorials, we will discuss how we can make a smooth transition between specified color using gradient values.

    CSS Gradients

    A gradient is a transition of two or more than two specified colors, and to create a transition, we can use the background-image property with the gradient value. There are two types of gradients

    • Linear Gradients(up/down/left/right/diagonally)
    • Radial Gradient (from the center)

    CSS Linear Gradients

    In linear gradients, the color transition can be moved from down to up, up to down, left to right, right to left, and diagonally. And to create a smooth transition gradient, we use the background-image property and linear-gradient() value. Inside the linear-gradient(direction, color1,color2) , we define the direction in which the transition should go and two or more colors. Syntax

    background-image: linear-gradient(direction, color1, color2, ...);

    The linear-Gradient transition from Top to bottom

    Top to bottom is the default value for the direction, in this color transition, change from top to bottom. Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .grad {
                    background-image:linear-gradient(blue,green);
                    height:200px;
                }
            </style>
        </head>
    <body>
        <div class="grad">
            Linear transition top to bottom
        </div>
    </body>
    </html>

    Preview

    Linear transition top to bottom

    The linear-gradient transition from left to right

    When we want to set a colorful transition from left to right then, the linear-gradient direction must be set to right . Syntax

    background-image: linear-gradient(to right, color1, color2, ...);

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .grad {
                    background-image:linear-gradient(to right,blue,green,yellow);
                    height:200px;
                }
            </style>
        </head>
    <body>
        <div class="grad">
            Linear transition left to right
        </div>
    </body>
    </html>

    Preview

    Linear transition left to right

    < Note >: To set the direction value to left from right to left transition or set the direction to up from bottom to up transition. Or use can Just reverse the order of the colors

    Linear-gradient diagonal transition

    To make a diagonal transition set the direction value to bottom right or to bottom left . This will present gradient colors in a diagonal direction. Syntax

    background-image: linear-gradient(to bottom right, color1, color2, ...);

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .grad {
                    background-image:linear-gradient(to bottom right,blue,green,yellow,red);
                    height:200px;
                }
            </style>
        </head>
    <body>
        <div class="grad">
            Linear transition Digonal
        </div>
    </body>
    </html>

    Preview

    Linear transition Digonal

    CSS Radial Gradient

    In the Radial gradient, the color transition starts from the center of the image. And like the linear-gradient, it also requires two or more than two colors to perform the smooth transition. But unlike the direction radial-gradient accept shape, size, and position for the transition.

    • The default shape is an ellipse.
    • The default size is farthest-corner
    • The default position is the center.

    Syntax

    background-image: radial-gradient(shape size at position, centercolor, color2,..);

    Example (1) (Evenly Spaced Color)

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .grad {
                    background-image:radial-gradient(red,yellow,blue);
                    height:200px;
                }
            </style>
        </head>
    <body>
        <div class="grad">
        </div>
    </body>
    </html>

    Preview

    Example (2) (various-shaped color)

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .grad {
                    background-image:radial-gradient(red 10%,yellow 30%,blue 60%);
                    height:200px;
                }
            </style>
        </head>
    <body>
        <div class="grad">
    
        </div>
    </body>
    </html>

    Preview

    The shape of the radial gradient

    By default, the shape of every radial transition is an ellipse but It can also be changed to circle. Syntax

      background-image: radial-gradient(circle, color1, color2, ….);

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .grad {
                    background-image:radial-gradient(circle,red 10%,yellow 30%,blue 60%);
                    height:200px;
                }
            </style>
        </head>
    <body>
        <div class="grad">
        </div>
    </body>
    </html>

    Preview

    Radial gradient Size

    The size parameter specifies the size of the gradient, and it accepts 4 values.

    • closest-side
    • farthest-side
    • closest-corner
    • farthest-corner

    Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .grad {
                    background-image:radial-gradient(closest-side,red ,yellow,blue);
                    height:200px;
                }
            </style>
        </head>
    <body>
        <div class="grad">
    
        </div>
    </body>
    </html>

    Preview

    Create a Rainbow transition in CSS

    We can either use the linear-gradient or radial-gradient to create a rainbow. But all the colors must be mention in the gradient parameter. Example

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .grad {
                    background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
                    height:200px;
                }
            </style>
        </head>
    <body>
        <div class="grad">
        </div>
    </body>
    </html>

    Preview

    CSS Gradient

    • A gradient is a smooth transition of multiple colors.
    • To create a gradient, we use the background-image property.
    • A gradient could be linear or radial.
    • The linear can create a color transition from left to right, top to bottom, or diagonally.
    • The radial gradient creates a transition from center to corner.

    People are also reading: