Can you stack linear gradients?

[do-kevin]

Hey there,

I'm trying to figure out if you can stack linear gradients. I am trying to create a gradient border for an element.

I've tried to do it in the tailwind config file, like in the Tailwind Docs: Customizing Your Theme:

module.exports = {
  .
  .
  theme: {
    extend: {
      backgroundImage: {
        "gradient-border": "linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) padding-box,
        linear-gradient(to right, rgb(147, 197, 253), rgb(124, 58, 237)) border-box",
      }
    },
  },
  .
  .

But that did not work when I applied my .bg-gradient-border. And the gradient only seems to work if I remove the second gradient and padding-box and border-box. Is this doable in Tailwind?

[wongjn]

It does not work because the value is invalid for the background-image CSS property – you cannot have white-space separated values in it and padding-box and border-box are invalid keyword values – they belong in the background-clip CSS property. You could split these up like so:

module.exports = {
  // …
  theme: {
    extend: {
      backgroundImage: {
        "gradient-border": "linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)),
        linear-gradient(to right, rgb(147, 197, 253), rgb(124, 58, 237))",
      },
      // Edit: below does not work!
      backgroundClip: {
        "gradient-border": "padding-box, border-box",
      },
    },
  },
  // …
}

And then apply these values together like bg-gradient-border bg-clip-gradient-border.

[do-kevin]

It does not work because the value is invalid for the background-image CSS property – you cannot have white-space separated values in it and padding-box and border-box are invalid keyword values – they belong in the background-clip CSS property. You could split these up like so:

module.exports = {
  // …
  theme: {
    extend: {
      backgroundImage: {
        "gradient-border": "linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)),
        linear-gradient(to right, rgb(147, 197, 253), rgb(124, 58, 237))",
      },
      backgroundClip: {
        "gradient-border": "padding-box, border-box",
      },
    },
  },
  // …
}

And then apply these values together like bg-gradient-border bg-clip-gradient-border.

Thanks for pointing out that padding-box and border-box are part of background-clip. It seems the other issue I'm running into is extending background clip. https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js#L43 doesn't seem to show background clip and it's not applying in my project or in my Tailwind Play. It isn't backgroundClip?

[wongjn]

Ah yes, sorry, I should have double-checked – indeed you cannot add extra values to bg-clip-* utilities, so the next best thing is using an arbitrary property like [background-clip:padding-box,border-box] or declare it in your CSS like:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .bg-clip-gradient-border {
    background-clip: padding-box, border-box;
  }
}

But then you might as well combine these classes if these two property values are always used together (instead of the Tailwind configuration stated initially):

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .bg-gradient-border {
    background-image:
      linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)),
      linear-gradient(to right, rgb(147, 197, 253), rgb(124, 58, 237));
    background-clip: padding-box, border-box;
  }
}

[do-kevin]

Haha, @wongjn, I just solved it when I saw your message. I just added my custom utility classes under plugins instead https://play.tailwindcss.com/EbEDFJnenn?layout=horizontal&file=config:

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'gradient-border':
          'linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), linear-gradient(to right, rgb(147, 197, 253), rgb(124, 58, 237))',
      },
    },
  },
  plugins: [
    function ({ addUtilities }) {
      addUtilities({
        '.clip-padding-border': {
          backgroundClip: 'padding-box, border-box',
        },
        '.origin-padding-border': {
          backgroundOrigin: 'padding-box, border-box',
        },
      })
    },
  ],
}

Thanks dude! For pointing me in the right direction.

[ylHe]

您好，您的邮件已收到，我会尽快查看！谢谢！