Open In App

Tailwind CSS Gradient Color Stops

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads