Search code examples
csstailwind-cssbordergradient

How to create a gradient border bottom in Tailwind CSS?

I'm trying to create a subtle gradient border bottom effect for an input field using Tailwind CSS. I want to achieve something like this: enter image description here

Here's my current attempt:

Tailwind CSS configuration:

// tailwind.config.js
module.exports = {
  // ... other configurations
  plugins: [
    plugin(function ({ addUtilities }) {
      const newUtilities = {
        '.border-gradient': {
          position: 'relative',
          '::after': {
            content: '""',
            position: 'absolute',
            left: '0',
            right: '0',
            bottom: '0',
            height: '2px',
            background: 'linear-gradient(to right, rgba(18, 242, 135, 0.1), rgba(18, 242, 135, 0.3), rgba(18, 242, 135, 0.1))',
          },
        },
      };
      addUtilities(newUtilities);
    }),
  ],
};

Input component:

<input
  className="w-full bg-transparent rounded-lg px-3 py-3.5 text-white placeholder-white/40 bg-input-gradient backdrop-blur-[5px] focus:outline-none transition border-gradient"
/>
  1. Added a custom utility class using a plugin in tailwind.config.js:
plugins: [
  plugin(function ({ addUtilities }) {
    const newUtilities = {
      '.border-gradient': {
        'border-image': 'linear-gradient(to right, #12F287 0%, rgba(18, 242, 135, 1) 50%, #12F287 100%) 1',
        'border-image-slice': '1',
      },
    };
    addUtilities(newUtilities);
  }),
],
  1. Attempted to use pseudo-elements for the gradient border:
'.border-gradient': {
  position: 'relative',
  '::after': {
    content: '""',
    position: 'absolute',
    left: '0',
    right: '0',
    bottom: '0',
    height: '2px',
    background: 'linear-gradient(to right, rgba(18, 242, 135, 0.1), rgba(18, 242, 135, 0.3), rgba(18, 242, 135, 0.1))',
  },
},

Expected result: A subtle gradient border at the bottom of the input field, transitioning from transparent to a light green (#12F287) and back to transparent, similar to this image:

enter image description here

Actual result: The border either didn't appear at all, or it showed up as a solid color instead of a gradient, like this:

enter image description here

Solution

  • border-color cannot normally be a gradient color. However, it is possible to use a pseudo-element to add a border-like element in a relative-absolute position.

    In Tailiwind, you can select these pseudo-elements using before: or after::

    <script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div class="flex min-h-dvh items-center justify-center">
  <button class="relative w-64 bg-sky-50 p-4 before:absolute before:inset-x-0 before:bottom-0 before:h-1 before:bg-gradient-to-r before:from-transparent before:via-green-500 before:to-transparent">Content</button>
</div>

    DEMO on Tailwind Play.

    Update an example using input:

    <script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div class="flex min-h-dvh items-center justify-center">
  <div class="relative w-64 bg-sky-50 before:absolute before:inset-x-0 before:bottom-0 before:h-1 before:bg-gradient-to-r before:from-transparent before:via-green-500 before:to-transparent">
    <input class="h-full w-full p-4" placeholder="Lorem ipsum..." />
  </div>
</div>

    DEMO on Tailwind Play.