Gradient Color Stops

Utilities for controlling the color stops in background gradients.

Default class reference

Starting color

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

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

Ending color

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

<div class="bg-gradient-to-r from-green-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="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.

Fading to transparent

Gradients fade out to transparent by default, without requiring you to add to-transparent explicitly. Tailwind intelligently calculates the right “transparent” value to use based on the starting color to avoid a bug in Safari that causes fading to simply the transparent keyword to fade through gray, which just looks awful.

Don’t add `to-transparent` explicitly

<div class="bg-gradient-to-r from-blue-500 to-transparent">
  <!-- ... -->
</div>

Only specify a from color and fade to transparent automatically

<div class="bg-gradient-to-r from-blue-500">
  <!-- ... -->
</div>

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-yellow-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-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 ...">
  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-green-400 to-blue-500 focus:from-pink-500 focus:to-yellow-500">
  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',
      })
    }
  }

Variants

By default, only responsive, dark mode (if enabled), 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: {
      extend: {
        // ...
+       gradientColorStops: ['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→

Edit this page on GitHub