Open In App

How to put Gradient Colors in a website ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn about how to put Gradient colors on a website, 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.

Syntax:

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

Example: This example uses 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 a 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: In this example, we are using radial gradient property value to create a gradient color in a website.

HTML




<!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:  In this example, we are using a conical gradient property value to create a gradient color in a website.

HTML




<!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



Last Updated : 11 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads