Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to put Gradient Colors in a website ?

  • Last Updated : 09 Jul, 2021

CSS gradients are images made by the transition between two or more colors. There are three types of gradients which are given below:

  • Linear Gradient
  • Radial Gradient
  • Conical Gradient

Image shows the types of gradients

Linear gradient: It is the type of gradient that progresses in a linear (straight) manner.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

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

Example: This example using a linear-gradient property value to create a gradient color in a website.



HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>CSS Gradients</title>
    <style>
        #container {
            height: 200px;
            background: linear-gradient(
                360deg, #fd6f46 10%, #fb9832 90%);
        }
  
        .gfg {
            color: #000000;
            text-align: center;
            font-size: 30px;
            font-weight: bolder;
            padding: 80px;
        }
    </style>
</head>
  
<body>
    <div id="container">
        <div class="gfg">GFG</div>
    </div>
</body>
  
</html>


 

Output:

Radial gradient: It is the type of gradient that has similar to linear-gradient, but the difference between the two is that this gradient radiates around from the central point.

Syntax:

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

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>CSS Gradients</title>
    <style>
        #main {
            height: 250px;
            width: 600px;
            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>

Output:
radial gradient

Conical gradient: It is the type of gradient that creates an image with color transitions happening around the central point of the image.
 
Syntax:

Background image: conic-gradient(color degree, color degree, ...)

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>Conic Gradient</title>
    <style>
        .box {
            background-color: yellow;
            height: 200px;
            width: 200px;
            float: left;
            margin: 20px;
            border-radius: 50%;
        }
  
        .c {
            background-image:conic-gradient(
                red, yellow, green, red);
        }
    </style>
</head>
  
<body>
    <div class="box c"></div>
</body>
  
</html

Output:
Conical Gradient




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!