Gradient Color Stops In Tailwind Css

Tailwind provides an intuitive and powerful set of classes for defining Gradient color stops. Our topic of discussion in this article is Gradient color stops in Tailwind CSS.

Gradient Color Stops

Using this utility, we can determine the colors and the position at which they should transition.

For this, we can apply the “from“,” via“, and “to” classes, followed by the color name or hex code.

  • The “from” class specifies the starting color.
  • The “via” class specifies the color in the middle.
  • While the “to” class sets the final color of the gradient.
Table Of Content-

Gradient Color Stops Classes

ClassesOverview
from-inheritThe starting color of gradient will be inherited from the parent element.
from-currentAn element’s current color is used as the starting color for a gradient.
from-transparentThis class sets the background color of an element to transparent at the beginning of a gradient.
from-blackThe starting color of the gradient is black.
from-whiteGradient begins with a white color.
from-slate-numberAs a result of this class, gradients have a starting color of slate. Saturation is indicated by a number.
from-gray-numberIt sets the starting color of a gradient to a shade of gray depending on the number used in the class.
from-zinc-numberThe starting color of the gradient is zinc, where intensity depends on the number.
from-neutral-numberThe color gradient starts with a neutral color. Different shades can be applied using the number.
from-stone-numberStone color is used as the starting color of the gradient. The number specifies the intensity of color.
from-red-numberDepending on the number used in the class, the starting color of the gradient is set to a shade of red.
from-orange-numberThis class is used to specify the starting color of a gradient as orange. Saturation is specified using the number.
from-amber-numberAs a result of this class, gradients have a starting color of amber. Saturation is indicated by a number.
from-yellow-numberThis class specifies the starting color for a gradient to a shade of yellow, with intensity depending on the number used.
from-lime-numberIt sets the starting color of a gradient to a shade of lime depending on the number used in the class.
from-green-numberUsed to define the starting color of a gradient as a shade of green. The color intensity depends on the number used.
from-emerald-numberWith this class, gradients are set to a shade of emerald as their starting color. A number specifies the saturation in the class.
from-teal-numberThis class defines the starting color of the gradient as teal. Number indicates saturation.
from-cyan-numberThis class specifies the starting color of the gradient as a shade of cyan. Number indicates color intensity.
from-sky-numberSky color is used as the starting color of the gradient. The number specifies the intensity of color.
from-blue-numberThis class sets the starting color of a gradient to a shade of blue depending on the number used in the class.
from-indigo-numberThe starting color of a gradient is set to a shade of indigo using this class. Saturation is specified using a number in the class.
from-violet-numberUsing this class, the gradient’s starting color is specified as violet. The greater the number, the more saturated the color.
from-purple-numberThis class specifies purple as the gradient’s starting color. Color saturation can be modified using the number.
from-fuchsia-numberUsed to define the starting color of a gradient to fuchsia. Number specifies the color intensity.
from-pink-numberIn this case, the starting color of a gradient is defined as a shade of pink. The color saturation depends on the number being used.
from-rose-numberDepending on the number used in the class, the starting color of the gradient is set to a shade of rose.
via-inheritThe color in the middle of the gradient will be inherited from the parent element.
via-currentAn element’s current color is used as the middle color for a gradient.
via-transparentThis class sets the background color of an element to transparent in the middle of a gradient.
via-blackThe middle color of the gradient is black.
via-whiteThere is a white color in the center of the gradient.
via-slate-numberAs a result of this class, gradients have a central color of slate. Saturation is indicated by a number.
via-gray-numberIt sets the central color of a gradient to a shade of gray depending on the number used in the class.
via-zinc-numberThe middle color of the gradient is zinc, where intensity depends on the number.
via-neutral-numberThe color gradient has a neutral color in the center. Different shades can be applied using the number.
via-stone-numberStone color is used as the middle color of the gradient. The number specifies the intensity of color.
via-red-numberDepending on the number used in the class, the middle color of the gradient is set to a shade of red.
via-orange-numberThis class is used to specify the middle color of a gradient as orange. Saturation is specified using the number.
via-amber-numberAs a result of this class, gradients have a middle color of amber. Saturation is indicated by a number.
via-yellow-numberThis class specifies the central color for a gradient to a shade of yellow, with intensity depending on the number used.
via-lime-numberIt sets the middle color of a gradient to a shade of lime depending on the number used in the class.
via-green-numberUsed to define the central color of a gradient as a shade of green. The color intensity depends on the number used.
via-emerald-numberWith this class, gradients are set to a shade of emerald as their middle color. A number specifies the saturation in the class.
via-teal-numberThis class defines the middle color of the gradient as teal. Number indicates saturation.
via-cyan-numberThis class specifies the middle color of the gradient as a shade of cyan. Number indicates color intensity.
via-sky-numberSky color is used as the central color of the gradient. The number specifies the intensity of color.
via-blue-numberThis class sets the middle color of a gradient to a shade of blue depending on the number used in the class.
via-indigo-numberThe central color of a gradient is set to a shade of indigo using this class. Saturation is specified using a number in the class.
via-violet-numberUsing this class, the gradient’s middle color is specified as violet. The greater the number, the more saturated the color.
via-purple-numberThis class specifies purple as the gradient’s central color. Color saturation can be modified using the number.
via-fuchsia-numberUsed to define the middle color of a gradient to fuchsia. Number specifies the color intensity.
via-pink-numberIn this case, the color in the middle of a gradient is defined as a shade of pink. The color saturation depends on the number being used.
via-rose-numberDepending on the number used in the class, the middle color of the gradient is set to a shade of rose.
to-inheritThe ending color of the gradient will be inherited from the parent element.
to-currentAn element’s current color is used as the ending color for a gradient.
to-transparentThis class sets the background color of an element to transparent at the end of a gradient.
to-blackThe ending color of the gradient is black.
to-whiteGradient ends with a white color.
to-slate-numberAs a result of this class, gradients have a ending color of slate. Saturation is indicated by a number.
to-gray-numberIt sets the ending color of a gradient to a shade of gray depending on the number used in the class.
to-zinc-numberThe starting color of the gradient is zinc, where intensity depends on the number.
to-neutral-numberThe color gradient ends with a neutral color. Different shades can be applied using the number.
to-stone-numberStone color is used as the starting color of the gradient. The number specifies the intensity of color.
to-red-numberDepending on the number used in the class, the ending color of the gradient is set to a shade of red.
to-orange-numberThis class is used to specify the ending color of a gradient as orange. Saturation is specified using the number.
to-amber-numberAs a result of this class, gradients have an ending color of amber. Saturation is indicated by a number.
to-yellow-numberThis class specifies the ending color for a gradient to a shade of yellow, with intensity depending on the number used.
to-lime-numberIt sets the ending color of a gradient to a shade of lime depending on the number used in the class.
to-green-numberUsed to define the ending color of a gradient as a shade of green. The color intensity depends on the number used.
to-emerald-numberWith this class, gradients are set to a shade of emerald as their ending color. A number specifies the saturation in the class.
to-teal-numberThis class defines the ending color of the gradient as teal. Number indicates saturation.
to-cyan-numberThis class specifies the ending color of the gradient as a shade of cyan. Number indicates color intensity.
to-sky-numberSky color is used as the ending color of the gradient. The number specifies the intensity of color.
to-blue-numberThis class sets the ending color of a gradient to a shade of blue depending on the number used in the class.
to-indigo-numberThe starting color of a gradient is set to a shade of indigo using this class. Saturation is specified using a number in the class.
to-violet-numberUsing this class, the gradient’s ending color is specified as violet. The greater the number, the more saturated the color.
to-purple-numberThis class specifies purple as the gradient’s ending color. Color saturation can be modified using the number.
to-fuchsia-numberUsed to define the ending color of a gradient to fuchsia. Number specifies the color intensity.
to-pink-numberIn this case, the ending color of a gradient is defined as a shade of pink. The color saturation depends on the number being used.
to-rose-numberDepending on the number used in the class, the middle color of the gradient is set to a shade of rose.
Note: For color classes with numbers, the number starts at 50, 100, 200, and so on up to 900 with increments of 100. These numbers indicate saturation.

Syntax

<element class="from-blue-400 via-red-500 to-teal-400">...</element>

This example showcases the implementation of gradient-color-stops using few classes defined above:

Gradient Color Stops Example: 

<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-medium my-2">Gradient Color Stops Class in Tailwind CSS</p> <div class="bg-gray-200 m-4 grid grid-flow-row gap-4 p-5 font-medium"> <div class="bg-gradient-to-r from-green-500 via-emerald-500 to-cyan-400 h-12"> green to emerald to cyan </div> <div class="bg-gradient-to-r from-teal-500 via-slate-500 to-gray-500 h-12"> teal to slate to gray </div> <div class="bg-gradient-to-r from-indigo-400 via-yellow-500 to-pink-500 h-12"> indigo to yellow to pink </div> </div> </body> </html>
Below example illustrates the usage of gradient color stops using some of the utility classes specified above:

Gradient Color Stops Example: 

<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-medium my-2">Gradient Color Stops Class in Tailwind CSS</p> <div class="bg-gray-200 m-4 grid grid-flow-row gap-4 p-5 font-medium"> <div class="bg-gradient-to-r from-amber-400 via-fuchsia-500 to-neutral-500 h-12"> amber to fuchsia to neutral </div> <div class="bg-gradient-to-r from-rose-400 via-orange-500 to-red-500 h-12"> rose to orange to red </div> <div class="bg-gradient-to-r from-stone-500 via-lime-500 to-violet-500 h-12"> stone to lime to violet </div> </div> </body> </html>
In this example, we make use of some Tailwind gradient color stops classes:

Gradient Color Stops Example: 

<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-gray-600 text-2xl font-semibold"> MrExamples </h1> <p class="font-medium my-2">Gradient Color Stops Class in Tailwind CSS</p> <div class="bg-gray-200 m-4 grid grid-flow-row gap-4 p-5 font-medium"> <div class="bg-gradient-to-r from-current via-black to-transparent text-gray-50 h-12"> current to black to transparent </div> <div class="bg-gradient-to-r from-white via-sky-400 to-blue-500 h-12"> white to sky to blue </div> <div class="bg-gradient-to-r from-amber-500 via-zinc-500 to-slate-500 h-12"> stone to lime to violet </div> </div> </body> </html>
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *