Border gradient используя tailwind

Question

Всем привет,
использую данный код для добавления градиента к элементу но видна белая полоска, как можно решить данную проблему

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: royalblue;
}

.border-gradient {
  overflow: hidden;
  position: relative;
}

.border-gradient:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.125rem;
  background-image: linear-gradient(to right, red, yellow);
  pointer-events: none;
  content: "";
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

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

<button class='bg-white inline-flex items-center py-3.5 px-10 justify-center font-semibold whitespace-nowrap cursor-pointer border-gradient rounded-2xl after:rounded-2xl'>Button gradient</button>

Answer 1

Артефакты можно побороть, добавив ещё один псевдоэлемент с нужным цветом, при этом уменьшив его на 1px и задав необходимый цвет фона. Также не забываем убрать класс bg-white у самой кнопки.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: royalblue;
}

.border-gradient {
  position: relative;
  overflow: hidden;
}

.border-gradient:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0.125rem;
  background-image: linear-gradient(to right, red, yellow);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.border-gradient:before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  padding: 0.125rem;
  background-color: #fff;
  pointer-events: none;
}

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

<button class='inline-flex items-center py-3.5 px-10 justify-center font-semibold whitespace-nowrap cursor-pointer border-gradient rounded-2xl after:rounded-2xl before:rounded-2xl'>Button gradient</button>

БЛОГ НА HUSL

Border gradient используя tailwind

Ответы (1 шт):