15

Is there a way to adjust the angle of the linear gradient on a background image style of an HTML component using Tailwind CSS?

The only thing I can do is choose between the directional options:t(top), tr(top-right), etc but I want to set the angle of the gradient to 24 degree for an hr element with a Tailwind class like .bg-gradient-[160deg] (and the colors: .from-lime .to-red)

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
badrianp
  • 153
  • 1
  • 1
  • 4

4 Answers4

19

Sure, you may write a simple plugin for this task

const plugin = require('tailwindcss/plugin')

module.exports = {
  theme: {
    extend: {
      // custom user configuration
      bgGradientDeg: {
        75: '75deg',
      }
    }
  },
  plugins: [
    plugin(function({ matchUtilities, theme }) {
      matchUtilities(
          {
              'bg-gradient': (angle) => ({
                  'background-image': `linear-gradient(${angle}, var(--tw-gradient-stops))`,
              }),
          },
          {
              // values from config and defaults you wish to use most
              values: Object.assign(
                  theme('bgGradientDeg', {}), // name of config key. Must be unique
                  {
                      10: '10deg', // bg-gradient-10
                      15: '15deg',
                      20: '20deg',
                      25: '25deg',
                      30: '30deg',
                      45: '45deg',
                      60: '60deg',
                      90: '90deg',
                      120: '120deg',
                      135: '135deg',
                  }
              )
          }
       )
    })
  ],
}

and use it like

<div class="h-40 from-red-500 via-yellow-500 to-blue-500 bg-gradient-90">
  90 deg from defaults
</div> 

<div class="h-40 from-red-500 via-yellow-500 to-blue-500 bg-gradient-10 sm:bg-gradient-60">
  10 deg on mobile,
  60 on desktops
</div> 

<div class="h-40 from-red-500 via-yellow-500 to-blue-500 bg-gradient-[137deg] sm:bg-gradient-to-br">
  137 deg from JIT on mobile,
  to bottom right on desktop
</div> 

<div class="h-40 from-red-500 via-yellow-500 to-blue-500 bg-gradient-75">
  75 deg from user's custom config
</div>

DEMO

If it will help, I just created simple package for Tailwind v3 for this

Ihar Aliakseyenka
  • 9,587
  • 4
  • 28
  • 38
4

This works for me in Tailwind 3.2.7:

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'gradient-24': 'linear-gradient(24deg, var(--tw-gradient-stops))'
      },
    },
  },
}

<div class="bg-gradient-24 from-lime-500 to-red-500">Content of div</div>
Andy Stewart
  • 5,013
  • 2
  • 28
  • 38
3

You don't need a plugin to achieve what you want. You can do something like this where theme("colors.gray.600") are just values from your tailwind config:

theme: {
    backgroundImage: (theme) => ({
      "image-gradient-90deg": [
        "90deg",
        theme("colors.gray.600"),
        theme("colors.gray.500"),
      ],
    }),
}
Thomas Taylor
  • 864
  • 8
  • 25
  • 1
    one note here is that the way this is defined, usage would be `bg-bg-image-gradient-90deg`. I removed the leading "bg" from the variable name and it looked much better. – Bek Apr 12 '23 at 17:15
  • Good point thank you. Have update my answer. – Thomas Taylor Jun 04 '23 at 08:33
1

Try this

  1. Approach 1:

// inside your "tailwinnd-preset.js" file

module.exports = {
  theme: {
    extend: {
      // ... others
      backgroundImage: ({
        theme
      }) => ({
        'image-gradient-315deg': 'linear-gradient(315deg, var(--tw-gradient-stops))',
      }),
      // ... others
    }
  }
}

or you can

backgroundImage: ({
  theme
}) => ({
  'gradient-blue-1': 'var(--gradient-blue-1)', // defined at :root by css variable
}),
:root {
  --gradient-blue-1: linear-gradient(315deg, #1250dc 0%, #306de4 100%);
}

Then below is how to use it

<div className="bg-image-gradient-315deg from-violet-500 to-fuchsia-500">

</div>
hungnd
  • 91
  • 2
  • 4