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.
<!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 >
<!-- Include Tailwind CSS -->
< 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 >
<!-- Box Div -->
< 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:
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.
<!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 >
<!-- Include Tailwind CSS -->
< link href =
rel = "stylesheet" >
</ head >
< body class="flex flex-col justify-center
items-center h-screen bg-gray-100">
<!-- Text Div -->
< 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:
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.
// tailwind.config.js module.exports = { content: [],
theme: {
extend: {
backgroundImage: theme => ({
'gradient-to-45' :
'linear-gradient(45deg, #ffed4a, #ff3860)' ,
'gradient-to-135' :
'linear-gradient(135deg, #ffed4a, #ff3860)' ,
// You can add more custom classes here
})
},
},
plugins: [],
} |
<!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 >
<!-- Include Tailwind CSS -->
< 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: