Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Gradient Color Stops

  • Last Updated : 25 Mar, 2021

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="gardient-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




My Personal Notes arrow_drop_up
Recommended Articles
Page :