How to Change the Direction of a Gradient in Tailwind CSS ?
Last Updated :
08 Feb, 2024
In Tailwind CSS, you can change the direction of a gradient using the bg-gradient-to utility class. For example, bg-gradient-to-r sets the gradient from left to right, while bg-gradient-to-b sets it from top to bottom. Choose the appropriate direction class to achieve the desired gradient orientation.
Using Utility classes
In Tailwind CSS, apply gradient backgrounds using utility classes like bg-gradient-to-r for a left-to-right gradient or bg-gradient-to-b for a top-to-bottom gradient. Customize gradients easily with these intuitive utility classes.
Example 1: Implementation to change the direction of a gradient using gradient classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Vertically Centered Div Demo</title>
<link href=
rel="stylesheet">
</head>
<body class="flex flex-col justify-center
items-center h-screen bg-gray-100">
<h1 class="text-center text-green-600
text-5xl font-bold mb-5">
GeeksforGeeks
</h1>
<h1 class="text-2xl font-bold my-5">
Gradirent direction: from
bottom right to top left
</h1>
<div class="bg-gradient-to-r from-green-100
to-green-900 bg-white
shadow-lg rounded-lg p-6 w-44 h-44">
</div>
</body>
</html>
|
Output:
Tailwindcss gradirent direction from left to right
Example 2: This example will change the direction to right by using the class “bg-gradirent-to-right” to set the gradirent direction from bottom to right.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Vertically Centered Div Demo</title>
<link href=
rel="stylesheet">
</head>
<body class="flex flex-col justify-center
items-center h-screen bg-gray-100">
<h1 class="text-center text-green-600
text-5xl font-bold mb-5">
GeeksforGeeks
</h1>
<h1 class="text-2xl font-bold my-5">
Gradirent direction: from bottom to top
</h1>
<div class="text-4xl font-bold bg-clip-text
text-transparent
bg-gradient-to-r from-green-200 to-green-700">
Gradirent text
</div>
</body>
</html>
|
Output:
Gradient in text using tailwind css direction top
Using Custom classes
To change the direction of a gradient in Tailwind CSS using utility classes, you can use the bg-gradient-to class along with a directional keyword like to-right, to-left, to-bottom, or to-top. For example, bg-gradient-to-right applies a gradient from left to right.
Example: Implementation to change the direction of a gradient using custom classes.
Javascript
module.exports = {
content: [],
theme: {
extend: {
backgroundImage: theme => ({
'gradient-to-45':
'linear-gradient(45deg, #ffed4a, #ff3860)',
'gradient-to-135':
'linear-gradient(135deg, #ffed4a, #ff3860)',
})
},
},
plugins: [],
}
|
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Vertically Centered Div Demo</title>
<link href=
rel="stylesheet">
</head>
<body class="flex flex-col justify-center
items-center h-screen bg-gray-100">
<h1 class="text-center text-green-600
text-5xl font-bold mb-5">
GeeksforGeeks
</h1>
<h1 class="text-2xl font-bold my-5">
Gradirent direction: from bottom right to top left
</h1>
<div class="bg-gradient-to-45 from-green-100 to-green-900
bg-white shadow-lg rounded-lg p-6 w-44 h-44">
</div>
</body>
</html>
|
Output:
Gradirent in tailwind css using custom classes
Share your thoughts in the comments
Please Login to comment...