Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Using CSS gradient property in background

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2
    • 0
    • 745
    Comment on it

    Hii,

    In this blog i am going share how to use css gradient property to increase visual appeal of your webpage.
    Go through the example below to learn how we can apply gradient property in background of any html tags in different ways.
    CSS gradient properties can be applied in two ways, namely:
    Linear Gradients:Using linear gradient property we can apply gradient in up,down,left,right and diagonal direction.
    Radial Gradients:Using radial gradient property we can apply gradient in circular form starts from the center.

    Following css properties are used in linear gradient, namely 


    shape,size,position(left,right,top,bottom),starting color shade, mid part color shade and last color shade.


    Following css properties are used in radial gradient, namely 


    side,corner,shape,space.
       

    Syntax of radial gradient:

    background:radial-gradient(shape/size/position, start-color, ..., last-color);


    Syntax of linear gradient:

    background: linear-gradient(direction, color in first direction, color second direction, ...);

     

    Note:To apply css gradient property you must choose two color shades.

    Example:This is a simple example in which i had used css linear gradient property

    CSS:

    #linear_gradient {
         height: 200px;
        background: red; /* For browsers that do not support gradients */    
        background: -webkit-linear-gradient(top left, red,white,black,green,blue,pink); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(top left, red,white, black,green,blue,pink); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(top left, red,white, black,green,blue,pink); /* For Firefox 3.6 to 15 */
        background: linear-gradient(to top left, red,white, black,green,blue,pink); /* Standard syntax (must be last) */
    }

    HTML:

    <div id="linear_gradient"></div>

    Output:To see the output check the screenshot attached below.

    Example:This is a simple example in which i had used css radial gradient property

    CSS:

    #radial_gradient {
        height:200px;
        width:200px;
        background: red; /* For browsers that do not support gradients */
        background: -webkit-radial-gradient(circle, red 15%,white,black,green,blue,pink); /* Safari 5.1-6.0 */
        background: -o-radial-gradient(circle,red   15% ,white,black,green,blue,pink); /* For Opera 11.6 to 12.0 */
        background: -moz-radial-gradient(circle,red  15% ,white,black,green,blue,pink); /* For Firefox 3.6 to 15 */
        background: radial-gradient(circle,  red  15%,white,black,green,blue,pink); /* Standard syntax (must be last) */
    }

    HTML:

    <div id="radial_gradient"></div>

    Output:To see the output check the screenshot attached below.
    Note : If you want gradient property in circular shape you specify width and height of the box in aspect ratio.

    Using CSS gradient property in  background

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: