Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add gradients to your project using CSS?
Introduction
In this article, we will show you how to add gradients to your project using CSS. Gradients are a great way to add visual interest to your website or application. They are a smooth transition between two or more colors and can be used to create a sense of depth or movement. They can also be used to create a subtle texture or pattern on your webpage.
Approaches
The following are the two approaches that we are going to follow in this article to add gradients to our project using CSS −
Using the linear-gradient function
Using the radial-gradient function
To understand these in detail, let us explore them further along with some examples.
Approach 1: Using the linear-gradient function
One way to add gradients to your project using CSS is by using the linear-gradient function. Linear gradients are a way to create smooth transitions between two or more colors. The linear-gradient function in CSS is used to create a linear gradient background for elements on a webpage.
It's a powerful tool that allows you to add a touch of creativity and visual interest to your website. With the linear-gradient function, you can create gradients that go from one color to another, or even multiple colors at once. You can also control the direction of the gradient, making it go from top to bottom, left to right, or at any angle you desire.
Example
The following is an example of how to add a linear gradient to your project using the lineargradient function −
Step 1 − In your CSS file (style.css), use the background property to set the linear gradient −
gradient-example {
background: linear-gradient(to right, #ff0000, #ffff00);
}
Step 2 − Apply the gradient-example class to the element in your index.html file you want the gradient to be applied to −
<div class="gradient-example"> <p>Welcome to Tutorials Point</p> </div>
This approach allows you to create a linear gradient that goes from one color to another, in this example red to yellow.
Step 3 − Here is the complete code in an index.html file −
Example
<!DOCTYPE html>
<html>
<head>
<title>Gradient Example</title>
<style>
body{
color: white;
text-align: center;
font-size: 3rem;
}
.gradient-example {
background: linear-gradient(to right, #ff0000, #ffff00);
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div class="gradient-example">
<p>Welcome to Tutorials Point</p>
</div>
</body>
</html>
In this example, we used the linear-gradient function to set the background of the element with the class "gradient-example" to a gradient that goes from red to yellow. We have set the width and height of the element to 100% to ensure that the gradient covers the entire element.
Approach 2: Using the radial-gradient function
Radial gradients in CSS are created using the radial-gradient function and are typically used to create a circular or elliptical gradient. The syntax for creating a radial gradient is similar to that of a linear gradient, with the addition of a shape and size keyword.
The shape keyword is used to specify whether the gradient should be circular or elliptical, and the size keyword is used to specify the size of the gradient. The radial-gradient function also allows you to specify multiple color stops, which can be used to create more complex gradients with multiple colors.
Example
The following is an example of how to add a radial gradient to your project using the radialgradient function −
Step 1 − In your CSS file, use the background property to set the radial gradient −
.gradient-example {
background: radial-gradient(circle, #ff0000, #ffff00);
}
Step 2 − Apply the gradient-example class to the element you want the gradient to be applied to −
<div class="gradient-example"> <p>Welcome to Tutorials Point</p> </div>
This approach allows you to create a radial gradient that goes from one color to another, in this example red to yellow.
Step 3 − Here is the complete code in an index.html file −
Example
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-example {
background: radial-gradient(circle, #ff0000, #ffff00);
height: 300px;
width: 300px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
</style>
</head>
<body>
<div class="gradient-example">
<p>Welcome to Tutorials Point</p>
</div>
</body>
</html>
In this example, we've added some additional CSS to the .gradient-example class to set the height and width of the element, as well as some flexbox properties to center the text within the element.
Conclusion
In this article, we've shown you two approaches to adding gradients to your project using CSS. We've used the linear-gradient and radial-gradient functions to create linear and radial gradients respectively. You can customize the gradient by changing the direction, colors, and shape of the gradient. Gradients are a great way to add visual interest and depth to your website or application, and with CSS, it's easy to create and implement them
256 Views
