This class accepts more than one value in tailwind CSS. All the properties are covered as in class form. It is the alternative to the CSS Gradients property.
Gradient Color Stops classes:
- from-transparent: This class is used to set the start color transparency.
- from-current: This class is used to adopt the parent color for the element that will use as the start color.
- from-color-number: This class is used to set the starting color of a gradient.
- via-transparent: This class is used to set the via color transparency.
- via-current: This class is used to adopt the parent color for the element that will use as the via color.
- via-color-number: This class is used to set via the color of a gradient.
- to-transparent: This class is used to set the end color transparency.
- to-current: This class is used to adopt the parent color for the element that will use as the end color.
- to-color-number: This class is used to set the ending color of a gradient.
Note: All the color can be used (9 Color), here the number start from 50, 100, 200, and so on up to 900. You can check for color availability from CSS Colors.
Syntax:
<element class="gradient-color-stops">...</element>
Example:
HTML
<!DOCTYPE html> <html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Gradient Color Stops Class</b>
<div class="bg-gray-400 m-4 grid grid-flow-row gap-4 p-5">
<div class="bg-gradient-to-r from-green-500 h-16">
Gradient Color Stops: from-color
</div>
<div class="bg-gradient-to-r from-green-500
to-blue-500 h-16">
Gradient Color Stops: to-color
</div>
<div class="bg-gradient-to-r from-indigo-400
via-yellow-500 to-green-500 h-16">
Gradient Color Stops: via-color
</div>
</div>
</body>
</html>
|
Output:
gradient color stops