How to put Gradient Colors in a website ?
Last Updated :
11 May, 2023
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:
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:
Similar Reads
How to set gradient border color in CSS? CSS Gradient Color applies two or more colors by smoothly transitioning between the colors. In this article, we will see how to set the Gradient Border Color of an element using CSS. Gradient Border Color enhances the styling of the element. Set the Gradient Border using border-image propertyThe bor
2 min read
How to use Linear Gradient in CSS? The linear gradient in CSS is a type of gradient where colors transition in a straight line, either vertically, horizontally, or at any specified angle. The gradient in CSS can be often used to add smooth color transitions to the backgrounds, buttons, or other UI elements. Linear gradients can enhan
5 min read
How to Create Gradient Color of Progress Bar in CSS? Creating a gradient color progress bar can add a visually appealing element to your webpage. Gradients provide smooth transitions between colors, making the progress bar more attractive and enhancing the user experience. These are the different approaches to creating a gradient color progress bar us
2 min read
How to Add a Gradient Overlay to Text with CSS? Adding a gradient overlay to text can create visually appealing effects that enhance the design of a website. CSS provides various techniques to apply gradients to text. Table of Content Approach 1: Using background-clipApproach 2: Using a MaskApproach 3: Using SVGGradient Overlay to Text using back
2 min read
How to apply gradient as the mask using CSS ? In this article, we will learn how to include the gradient as the mask layer in CSS, along with understanding their basic implementation with the help of suitable examples. The Mask Property with a Gradient is used to create a mask layer, that can be utilized for rendering or hiding the area of the
3 min read
How to create linear gradient text by using HTML ? Creating linear gradient text on a webpage can add a dynamic and visually interesting touch to the design. While it is typically created using CSS, it is also possible to create linear gradient text using only HTML. Approach: Using the `<svg>` Element: The `<svg>` element in HTML provide
2 min read