Gradient Color Stops

Utilities for controlling the color stops in background gradients.

Class reference

Starting color

Set the starting color of a gradient using the from-{color} utilities.

<div class="h-24 bg-gradient-to-r from-red-500"></div>

Gradients fade out to transparent by default.

Ending color

Set the ending color of a gradient using the to-{color} utilities.

<div class="h-24 bg-gradient-to-r from-teal-400 to-blue-500"></div>

Gradients to do not fade in from transparent by default. To fade in from transparent, reverse the gradient direction and use a from-{color} utility.

Middle color

Add a middle color to a gradient using the via-{color} utilities.

<div class="h-24 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500"></div>

Gradients with a from-{color} and via-{color} will fade out to transparent by default if no to-{color} is present.

Responsive

To control the gradient color stops of an element at a specific breakpoint, add a {screen}: prefix to any existing gradient color stop utility. For example, use md:from-green-500 to apply the from-green-500 utility at only medium screen sizes and above.

<div class="bg-gradient-to-r from-purple-400 md:from-orange-500"></div>

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Hover

To control the gradient color stops of an element on hover, add the hover: prefix to any existing gradient color stop utility. For example, use hover:bg-blue-500 to apply the bg-blue-500 utility on hover.

<button type="button" class="bg-gradient-to-r from-teal-400 to-blue-500 hover:from-pink-500 hover:to-orange-500 text-white font-semibold px-4 py-2 rounded">
  Hover me
</button>

Hover utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

<button class="... md:from-blue-500 md:hover:from-blue-700 ...">Button</button>

Focus

To control the gradient color stops of an element on focus, add the focus: prefix to any existing gradient color stop utility. For example, use focus:bg-blue-500 to apply the bg-blue-500 utility on focus.

<button type="button" class="bg-gradient-to-r from-teal-400 to-blue-500 focus:from-pink-500 focus:to-orange-500 text-white font-semibold px-4 py-2 rounded">
  Focus me
</button>

Focus utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

<button class="... md:from-blue-500 md:focus:from-blue-700 ...">Button</button>

Customizing

Background Colors

By default Tailwind makes the entire default color palette available as gradient color stops.

You can customize your color palette by editing the theme.colors variable in your tailwind.config.js file, or customize just your gradient color stop colors using the theme.gradientColorStops section of your Tailwind config.

  // tailwind.config.js
  module.exports = {
    theme: {
      gradientColorStops: theme => ({
-       ...theme('colors'),
+       'primary': '#3490dc',
+       'secondary': '#ffed4a',
+       'danger': '#e3342f',
      })
    }
  }

Responsive and pseudo-class variants

By default, only responsive, hover and focus variants are generated for gradient color stops utilities.

You can control which variants are generated for the gradient color stops utilities by modifying the gradientColorStops property in the variants section of your tailwind.config.js file.

For example, this config will also generate active and group-hover variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     gradientColorStops: ['responsive', 'hover', 'focus'],
+     gradientColorStops: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
    }
  }

Disabling

If you don’t plan to use the gradient color stops utilities in your project, you can disable them entirely by setting the gradientColorStops property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     gradientColorStops: false,
    }
  }

← Background Image   Border Radius →